Hello, I want to create a custom picker, where I can add custom components to it (instead of only text). The problem that I am facing is that I can not find any concepts that allow a View to overlay the content with the picker, when it is open.
I found the solution by looking at the source code of TimePicker
from "react-time-picker"
. The concept is to use View
with style={{zIndex: 1}}
and child View
with style={{position: "absolute"}}
which does overlay every other View
because the default styling of View
contains position: "relative", zIndex: 0
.
import * as React from 'react';
import { Text, View } from 'react-native';
export default function App() {
return (
<View style={{margin: 50}}>
<View><Text>this is a text</Text></View>
<View><Text>this is a text</Text></View>
<View style={{zIndex: 1}}>
<View style={{position: "absolute", backgroundColor: "red"}}>
<Text>overlay</Text>
</View>
</View>
<View><Text>this is a text</Text></View>
<View><Text>this is a text</Text></View>
</View>
);
}
Fit
from "react-fit"
can be used to find a position of the picker where the layout and scroll position is not changed significantly so the elements on the screen and the screen itself do not jump around if the picker is shown or hidden.
import * as React from 'react';
import { Text, View } from 'react-native';
import Fit from 'react-fit';
export default function App() {
return (
<View style={{margin: 50}}>
<View><Text>this is a text</Text></View>
<View><Text>this is a text</Text></View>
<View style={{zIndex: 1}}>
<Fit>
<View style={{position: "absolute", backgroundColor: "red"}}>
<Text>overlay</Text>
</View>
</Fit>
</View>
<View><Text>this is a text</Text></View>
<View><Text>this is a text</Text></View>
</View>
);
}
Notice that the zIndex: 1
has to be on the parent component of Fit
.
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.