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.

Nested Text

We can add nested Text components.

For instance, we can write:

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

export default function App() {
  return (
    <View
      style={{
        flexDirection: "row",
        height: 100,
        padding: 20
      }}
    >
      <Text style={styles.baseText}>
        I am bold
      <Text style={styles.innerText}> and red</Text>
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  baseText: {
    fontWeight: 'bold'
  },
  innerText: {
    color: 'red'
  }
});

We add the Text component within another Text component.

Then we styled them with the styles created with the StyleSheet.create method.

Containers

Everything inside the Text element isn’t using flexbox layout.

They’re using text layout.

For example, if we have:

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

export default function App() {
  return (
    <Text>
      <Text>First part and </Text>
      <Text>second part</Text>
    </Text>
  );
}

then we see everything inline.

If we have:

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

export default function App() {
  return (
    <View>
      <Text>First part and </Text>
      <Text>second part</Text>
    </View>
  );
}

then we see:

First part and
second part

Text must be wrapped in a Text component.

The Text component lets us inherit styles.

For example, if we have:

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

export default function App() {
  return (
    <View>
      <Text style={{ fontWeight: 'bold' }}>
        I am bold
        <Text style={{ color: 'red' }}>and red</Text>
      </Text>
    </View>
  );
}

Then we have all the text inside the outer Text component being bold.

And the ‘and red’ text is red and bold.

TextInput

We can add text input into our app with the TextInput component.

For example, we can write:

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

export default function App() {
  const [value, onChangeText] = React.useState('hello world');

  return (
    <View>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        onChangeText={text => onChangeText(text)}
        value={value}
      />
      <Text>{value}</Text>
    </View>
  );
}

to add an text input with the TextInput component.

We listen to input value changes by passing in a function to the onChangeText prop.

Then the value ‘s value will have the latest inputted text.

We can the max number of characters in the input with the maxLength prop:

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

export default function App() {
  const [value, onChangeText] = React.useState('hello world');

  return (
    <View>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        onChangeText={text => onChangeText(text)}
        value={value}
        editable
        maxLength={40}
      />
      <Text>{value}</Text>
    </View>
  );
}

Now we can only enter 40 characters into the input max.

Conclusion

We can add nested Text components.

Also, we can add text inputs with the TextInput component.

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 Reac.

Uri Data Images

We can add images for a base64 URI.

For example, we can write:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Image
        style={{
          width: 51,
          height: 51,
          resizeMode: 'contain'
        }}
        source={{
          uri:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='
        }}
      />
      <StatusBar style="auto" />
    </View>
  );
}

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

We just set the uri property to set the image URI.

We should only use this for small images.

Background Image

For example, we can write:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { ImageBackground, StyleSheet, View, Text } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <ImageBackground source={require('./assets/fork.jpg')} style={{ width: '100%', height: '100%' }}>
        <Text>Inside</Text>
      </ImageBackground>
      <StatusBar style="auto" />
    </View>
  );
}

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

We used the ImageBackground component to add the background image.

Then we can have things like text inside it.

View

A View is a container that supports layouts with flexbox, styles, touch handling, and accessibility controls.

For example, we can write:

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

export default function App() {
  return (
    <View
      style={{
        flexDirection: "row",
        height: 100,
        padding: 20
      }}
    >
      <View style={{ backgroundColor: "green", flex: 0.3 }} />
      <View style={{ backgroundColor: "red", flex: 0.5 }} />
      <Text>Hello World!</Text>
    </View>
  );
}

The outer View component is a flexbox container for the inner View components.

We can set the backgroundColor for views.

And we can add the Text component to add the text.

Text

The Text component is a component that’s used for displaying text.

For example, we can write:

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

const onPressTitle = () => {
  console.log("title pressed");
};

export default function App() {
  const titleText = useState("Bird's Nest");
  const bodyText = useState("This is not really a bird nest.");

  return (
    <View
      style={{
        flexDirection: "row",
        height: 100,
        padding: 20
      }}
    >
      <Text style={styles.baseText}>
        <Text style={styles.titleText} onPress={onPressTitle}>
          {titleText}
          {"n"}
        </Text>
        <Text numberOfLines={5}>{bodyText}</Text>
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  baseText: {
    fontFamily: "Cochin"
  },
  titleText: {
    fontSize: 20,
    fontWeight: "bold"
  }
});

We can add the Text component to add some text.

We add the onPress prop and pass in an event handler to add an event handling for touching the text.

Conclusion

We can add URIs for images and background images with React Native.

Also, we can add View components for containers and Text component for text.

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.

FlatList

We can add the FlatList component to display a simple list view.

It’s cross-platform and works with horizontal mode.

Also, it has header, footer, and separator support.

We can pull it to refresh the data.

We can load data as we scroll with it.

And it also has multiple columns support.

For example, we can write:

import React from 'react';
import { SafeAreaView, FlatList, StyleSheet, View, Text } from 'react-native';
const DATA = Array(100).fill().map((_, i) => ({ id: i, title: i }))

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const renderItem = ({ item }) => (
  <Item title={item.title} />
);

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 0
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

to create our list.

We create the Item component that renders the View and Text component for a list item.

The renderItem function is a function to render a Item .

Then we add a SafeAreaView and a FlatList to let us render a scrollable list.

We pass an array in the data prop.

And the renderItem prop has the renderItem function we created earlier.

keyExtractor is a function to get the unique key for an item.

We can make our items selectable by using the TouchableOpacity component:

import React from 'react';
import { SafeAreaView, FlatList, StyleSheet, Text, TouchableOpacity } from 'react-native';
const DATA = Array(100).fill().map((_, i) => ({ id: i, title: i }))

const Item = ({ item: { title }, onPress, style }) => (
  <TouchableOpacity onPress={onPress} style={[styles.item, style]}>
    <Text style={styles.title}>{title}</Text>
  </TouchableOpacity>
);

export default function App() {
  const [selectedId, setSelectedId] = React.useState(null);
  const renderItem = ({ item }) => {
    const backgroundColor = item.id === selectedId ? "lightgreen" : "pink";
    return (
      <Item
        item={item}
        onPress={() => setSelectedId(item.id)}
        style={{ backgroundColor }}
      />
    );
  };

return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        extraData={selectedId}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 0
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

The Item component is rendered with the TouchableOpacity component to let us show something different when it’s selected.

In the App component, we have the renderItem function which takes the item and set the background color according to which one is pressed.

We determine which one is pressed with the onPress prop, which takes a function that calls setSelectedId to set the selected item’s ID.

Then in the style prop, we set the backgroundColor property to the color we want according to whether the selectedId is the same as the current item’s id .

Now when an item is selected, the item has a lightgreen background.

Otherwise, it has a pink background.

Conclusion

We can add a FlatList component to display a scrollable list of items.

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 our first app.

Getting Started

To get started with React Native, we’ve to install the Expo CLI.

We run:

npm install -g expo-cli

to install it.

Node 12 LTS or later is required.

Then we can create a React Native project by writing:

expo init react-native-example

We also have to install Android SDK with an Android device or emulator.

We can install Genymotion which is faster than the Android emulator.

To install it, we can go to https://www.genymotion.com/ to download it.

Then we go to:

cd react-native-example
yarn android

to start the Expo CLI.

In the react-native-example project, we have App.js which has:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

The View component has the main app view.

The Text component has text.

StatusCar has the status bar.

The StyleSheet.create method creates the styles.

Then we applied it with the styles prop.

We can use flexbox and other CSS properties for our layouts.

Images

We can add images by using the Image component.

For example, we can write:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Image source={require('./assets/fork.jpg')} />
      <StatusBar style="auto" />
    </View>
  );
}

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

We add the Image component with the source prop to set the image.

We can also add icons from a URL. For example, we can write:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Image source={{ uri: 'https://reactjs.org/logo-og.png' }}
        style={{ width: 400, height: 400 }} />
      <StatusBar style="auto" />
    </View>
  );
}

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

We can also set other HTML request data like the headers and body when we get the image.

For example, we can write:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Image
        source={{
          uri: 'https://reactjs.org/logo-og.png',
          method: 'POST',
          headers: {
            Pragma: 'no-cache'
          },
          body: 'Your Body goes here'
        }}
        style={{ width: 400, height: 400 }}
      />
      <StatusBar style="auto" />
    </View>
  );
}

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

Conclusion

We can get started with mobile development with React Native in a few minutes.

And we can use Genymotion or a real device to preview our app fast.