Category: React Native

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

Accessibility

We can add props to our components to make them accessible to assistive technologies.

For example, we can write:

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

export default function App() {
  return (
    <View accessible={true}>
      <Text>text one</Text>
      <Text>text two</Text>
    </View>
  );
}

We set the accessible prop to true to make the View accessible.

accessbilityLabel

Also, we can add an accessibilityLevel prop to our component to make it accessible.

For example, we can write:

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

export default function App() {
  return (
    <View accessible={true} style={styles.container}>
      <TouchableOpacity
        accessible={true}
        accessibilityLabel="Tap me!"
        onPress={() => alert('hello world')}>
        <View>
          <Text>Press me!</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

to add a TouchableOpacity component that has the accessbilityLabel prop to help screen readers identify the button.

We can also add the accessibilityHint prop to add a hint for the user to understand what the button does.

For example, we can write:

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

export default function App() {
  return (
    <View accessible={true} style={styles.container}>
      <TouchableOpacity
        accessible={true}
        accessibilityLabel="Tap me!"
        accessibilityHint="Shows alert"
        onPress={() => alert('hello world')}>
        <View>
          <Text>Press me!</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

accessibilityLiveRegion

The accessibilityLiveRegion prop is a prop that’s only available to Android apps.

It’s used to announce changes of the component to the user.

It can have 'none' , 'polite' and 'assertive' as the possible values.

'none' means don’t announce the changes.

'polite' means announce changes to the view.

'assertive' means interrupt ongoing speech to immediately announce changes to this view.

For example, we can write:

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

export default function App() {
  const [count, setCount] = React.useState(0);
  return (
    <View accessible={true} style={styles.container}>
      <TouchableWithoutFeedback onPress={() => setCount(c => c + 1)}>
        <View>
          <Text>Click me</Text>
        </View>
      </TouchableWithoutFeedback>
      <Text accessibilityLiveRegion="polite">
        Clicked {count} times
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

to add a Text component with the accessibilityLiveRegion prop to the Text component.

Now the changes to the text of this component will be announced.

accessibilityRole

The accessbilityRole prop lets us communicate what a component is used for to assistive technologies.

The list of possible values are at https://reactnative.dev/docs/accessibility#accessibilityrole.

accessibilityState

The accessibilityState prop describes the current state of a component to the user of assistive technologies.

It’s an object and it can have the disabled , selected , checked , busy , and expanded properties.

disabled indicates whether it’s disabled.

selected indicates whether it’s selected.

checked indicates whether it’s checked.

busy indicates whether it’s busy.

expanded indicates whether it’s expanded.

For instance, we can write:

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

export default function App() {
  return (
    <View accessible={true} style={styles.container}>
      <Text accessibilityState={{
        disabled: false,
        selected: false,
        checked: false,
        busy: false,
        expanded: false,
      }}>
        hello world
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

to set the values.

Conclusion

We can set the accessibility labels for components with React Native to make our app accessible.

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

TouchableNativeFeedback

The TouchableNativeFeedback component is available on Android to let us display an ink service reaction when we touch it.

For example, we can write:

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

export default function App() {
  return (
    <View style={styles.container}>
      <TouchableNativeFeedback
        onPress={() => {
          alert('You tapped the button!');
        }}
      >
        <View style={styles.button}>
          <Text style={styles.buttonText}>TouchableNativeFeedback</Text>
        </View>
      </TouchableNativeFeedback>
    </View >
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3'
  },
  buttonText: {
    textAlign: 'center',
    padding: 20,
    color: 'white'
  }
});

to add the TouchableNativeFeedback component with content inside.

TouchableOpacity

The TouchableOpacity component is used to provide feedback by reducing the opacity of the button.

The background will be seen through it while the user presses it down.

For instance, we can write:

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

export default function App() {
  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={() => {
          alert('You tapped the button!');
        }}
      >
        <View style={styles.button}>
          <Text style={styles.buttonText}>TouchableOpacity </Text>
        </View>
      </TouchableOpacity >
    </View >
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3'
  },
  buttonText: {
    textAlign: 'center',
    padding: 20,
    color: 'white'
  }
});

to add the TouchableOpacity component in our app.

TouchableWithoutFeedback

The TouchableWithoutFeedback component lets us add a touchable component without feedback.

For example, we can write:

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

export default function App() {
  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback
        onPress={() => {
          alert('You tapped the button!');
        }}
      >
        <View style={styles.button}>
          <Text style={styles.buttonText}>TouchableWithoutFeedback </Text>
        </View>
      </TouchableWithoutFeedback >
    </View >
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3'
  },
  buttonText: {
    textAlign: 'center',
    padding: 20,
    color: 'white'
  }
});

We add the TouchableWithoutFeedback component to add a button that doesn’t have any feedback when we touch it.

Navigating Between Screens

Mobile apps usually are made of multiple screens.

Therefore, we need a way to navigate between multiple screens.

React Native lets us do this with the React Navigation library.

To install the dependencies, we first run:

npm install @react-navigation/native @react-navigation/stack

Then we install the peer dependencies in our Expo manged project by running:

expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Then we can use the dependencies to add navigation by writing:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, StyleSheet, Text, View } from 'react-native';

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text> Home</Text>
      <Button
        title="Go to Profile"
        onPress={() =>
          navigation.navigate('Profile', { name: 'Jane' })
        }
      />
    </View>
  )
}

const ProfileScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text>Profile</Text>
      <Button
        title="Go to Home"
        onPress={() =>
          navigation.navigate('Home')
        }
      />
    </View>
  )
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: 'Welcome' }}
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

We have 2 components HomeScreen and Profile screen which are used for our app’s screens.

It has the navigation prop that lets us call the navigate method to navigate to the page we want.

In App , we add the NavigationContainer to add navigation.

Stack.Navigator is a container for the navigable components.

Stack.Screen adds our screens.

The component prop has the component to show.

Conclusion

We can add touchable components to add touchable items that has our own content.

Also, we can add navigation with various components.

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

Width and Height

The width and height properties can be set to change the size of an item.

For example, we can write:

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

export default function App() {
  return (
    <View style={{
      flex: 1,
    }}>
      <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
    </View>
  );
}

We set the width and height of the inner views in pixels to size the boxes.

The value can also be a percentage value or 'auto' .

Absolute and Relative Layout

In addition to flexbox layouts, we can also add absolute and relative layouts.

For example, we can write:

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

export default function App() {
  return (
    <View style={{
      flex: 1,
    }}>
      <View style={{
        position: 'absolute',
        top: 10,
        width: 50,
        height: 50,
        backgroundColor: 'powderblue'
      }} />
      <View style={{
        position: 'relative',
        top: 80,
        left: 80,
        width: 50,
        height: 50,
        backgroundColor: 'skyblue'
      }} />
    </View>
  );
}

We set the position , top and left properties as we do with CSS.

Colors

We can set the color values with a color name, hex string, an rgb() value, an rgba() value, a hsl() value, or a hsla() value.

For example, we can write:

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

export default function App() {
  return (
    <View style={{
      flex: 1,
    }}>
      <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: '#8a2be2' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'rgb(255, 4, 65)' }} />
    </View>
  );
}

We set the backgroundColor of the view with various color values.

Handling Touches

We can add a Button component to add a component into our app.

For example, we can write:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Button
        onPress={() => {
          alert('You tapped the button!');
        }}
        title="Press Me"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

to add a Button component.

The onPress prop takes a function that’s run when we press the button.

The title prop has the title of the button.

Touchables

We can also add touchable components to add touchable elements that are more customizable than buttons.

For example, we can use the TouchableHighlight component to use it as a button.

To do that, we write:

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

export default function App() {
  return (
    <View style={styles.container}>
      <TouchableHighlight
        onPress={() => {
          alert('You tapped the button!');
        }}
      >
        <View style={styles.button}>
          <Text style={styles.buttonText}>TouchableHighlight</Text>
        </View>
      </TouchableHighlight>
    </View >
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3'
  },
  buttonText: {
    textAlign: 'center',
    padding: 20,
    color: 'white'
  }
});

to add a TouchableHighlight component with a View inside for the content.

Conclusion

We can set the width, height, and position of our React Native components.

Also, we can add buttons and touchable components to add touchable elements in our app.

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

Align Content

We can use the alignContent property to set the alignment of the items in our React Native view.

For example, we can write:

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

export default function App() {
  return (
    <View style={{
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap',
      alignContent: 'flex-end'
    }}>
      <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
    </View>
  );
}

We set the alignContent to 'flex-end' with the flexDirection set to 'row' to put the inner views at the bottom of the screen.

The alignContent property is only applied when we set the flexWrap property.

The default value of 'flex-start' which puts the items at the top of the screen.

Other values include 'stretch' , 'center' , 'space-between' , and 'space-around' .

'stretch' stretches the items into the screen.

'center' centers the content.

'space-between' puts space between the item.

And 'space-around' makes the rows or columns evenly spaced.

Flex Wrap

The flexWrap property lets us set whether to wrap our rows or columns.

For instance, if we have:

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

export default function App() {
  return (
    <View style={{
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap',
      alignContent: 'flex-end'
    }}>
      <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
    </View>
  );
}

We set the flexWrap property to 'wrap' so that we wrap the rows.

Flex Basis, Grow, and Shrink

flexGrow describes how spaces within a container should be distributed among its children along the main axis.

It accepts any floating-point value bigger than or equal to 0.

flexShrink describes how to shrink children along the main axis in the case when the total size of the children overflows the size of the container.

It can also be bigger than or equal to 0.

flexBasis is an axis-independent way of providing the default size of an item along the main axis.

The flexBasis of a child is like setting the width of the child if its parent is a container with flexDiection set to row or setting the height of the child if it’s parent is a container with flexDiection set to column .

For example, we can use them by writing:

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

export default function App() {
  return (
    <View style={{
      flex: 1,
      flexDirection: 'row',
    }}>
      <View style={{ flexBasis: 200, height: 50, backgroundColor: 'powderblue' }} />
      <View style={{ flexGrow: 1, height: 50, backgroundColor: 'skyblue' }} />
      <View style={{ flexGrow: 3, height: 50, backgroundColor: 'steelblue' }} />
    </View>
  );
}

We use flexBasis to set the first view to 200px wide.

The rest are spread proportionally across the rest of the screen with the flexGrow properties.

This means 1/4 of the rest of the screen has the 2nd view.

And the rest of the screen has the 3rd view.

Conclusion

We can set flexbox properties to size and align content within React Native apps.

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

Layout with Flexbox

We can use flexbox for layouts with React Native.

It works the same way as CSS.

Flex

For example, we can write:

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

export default function App() {
  return (
    <View style={{ flex: 1, flexDirection: 'column' }}>
      <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
    </View>
  );
}

We create a column layout by setting flexDirection to 'column' on the outer view.

Then the inner views have their own dimensions set.

Layout Direction

The default direction for layouts is left to right.

It can also be set to right to left.

Justify Content

We can set the justifyContent property to spread the content the way we want.

For example, we can write:

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

export default function App() {
  return (
    <View style={{
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'space-between',
    }}>
      <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
    </View>
  );
}

We have flexDirection set to 'column' and justifyContent set to 'space-between' .

Therefore, the inner views will be spread evenly in a column.

Align Items

We can set the alignItems property to align the items.

For example, we can write:

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

export default function App() {
  return (
    <View style={{
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'stretch',
    }}>
      <View style={{ height: 50, backgroundColor: 'powderblue' }} />
      <View style={{ height: 50, backgroundColor: 'skyblue' }} />
      <View style={{ height: 50, backgroundColor: 'steelblue' }} />
    </View>
  );
}

We set alignItems to 'stretch' , so the inner views will stretch across the screen.

Other values for alignItems can be 'flex-start' , 'center' , or 'flex-end' .

Align Self

The alignSelf property is also available with React Native.

For example, we can write:

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

export default function App() {
  return (
    <View style={{
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'center',
    }}>
      <View style={{ width: 50, height: 50, backgroundColor: 'powderblue', alignSelf: 'flex-end' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
    </View>
  );
}

to add the alignSelf property to our first inner view.

It’s set to 'flex-end' so it’ll be put on the right side.

Conclusion

We can use many flexbox properties to create layouts with React Native.