Programming Tutorials

flex in React Native

By: James in React-Native Tutorials on 2023-04-08  

In React Native, the flex property is used to specify how an item should grow or shrink to fill the available space. It is commonly used to create responsive layouts that adapt to different screen sizes.

Here's an example of how to use flex to create a simple layout with two items:

import React from 'react';
import { View, Text } from 'react-native';

const MyComponent = () => {
  return (
    <View style={{ flex: 1 }}>
<View style={{ flex: 1, backgroundColor: 'red' }}>
<Text>Item 1</Text>
<View style={{ flex: 2, backgroundColor: 'blue' }}>
<Text>Item 2</Text>
</View> ); }; export default MyComponent;

In this example, we have a parent View with flex: 1 set, which means it will take up all the available space. Inside the parent View, we have two child Views. The first child View has flex: 1 set, which means it will take up 1/3 of the available space. The second child View has flex: 2 set, which means it will take up 2/3 of the available space.

We've also given each child View a background color and added some text inside them so we can see how they're rendered on the screen.

By using flex, we can create responsive layouts that adjust to different screen sizes and orientations.

Add Comment

* Required information


No comments yet. Be the first!

Most Viewed Articles (in React-Native )

Latest Articles (in React-Native)

Session variables in React Native - Expo

use axios in Expo to call APIs

Start background location tracking after login in expo react native

set up a global error handler in React Native (expo)

SafeAreaView in React Native

Some dependencies are incompatible with the installed expo version:

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

react-native-android-location-services-dialog-box alternative in expo

Error Handling in TextInput - React Native

react-native-background-job alternative in expo app

'import' and 'export' may only appear at the top level - React Native

OpenType (OTF) vs TrueType (TTF)

loadAsync() vs useFonts() in expo - react native

expo-secure-store vs expo-file-system in expo - react native

Send push notifications to android/ios sample code using expo - react native