Custom picker with custom components as content

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>
  );
}

Screenshot from 2021-07-29 19-32-40

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.