While Stying Flex-1 doesn't work while working with React Native on an android phone-CodePudding

My code: -

    <View className="flex-row items-center space-x-2 pb-2 mx-4">
      <View className="flex-row space-x-2 bg-gray-200 p-3 flex-1">
        <SearchIcon color="gray" size={20} />
        <TextInput
          placeholder="Restaurants and Cusines"
          keyboardType="default"
        />
      </View>

      <AdjustmentsIcon color="#00CCBB" />
    </View>

also I am using tailwind-css but I also checked it with normal stying it doesn't work :(

CodePudding user response：

React Native styling system differs from traditional css. Elements use the style prop, which expects an object or an array of objects (take a look at the styling link). If you must use tailwind, you will want to find some way to convert the css styles into the react native styling system or to find port of tailwind for react native

CodePudding user response：

For the flex-1 to work the relationship should be siblings not parent-child. And the parent display of the siblings should be flex

Parent   // display flex
 - child // display flex-none or flex-1 or flex-auto
 - child // display flex-none or flex-1 or flex-auto

In you present code hierarchy is a view is inside another view:

- View
  - View

For things to work , try:

- View 
- View

And set the parent display property of both the views to display flex

CodePudding user response：

If you want to use TailwindCSS in your React Native project, you can use tailwindcss-react-native instead