How to Generate Random String in React Native?

Hi Guys,

Now, let's see article of how to create random string in react native. This post will give you simple example of random string generator using react native. I explained simply step by step how to implement random string in react native. This article will give you simple example of react native random string example. you will do the following things for how to generator random string in react native.

Let's start following example:

In the first step run the following command to create a project.

expo init ExampleApp

In this step, You will open the App.js file and put the code.

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

const App = () => {
    const [string, setString] = React.useState('String');

    const generateRandomString = (lenth) => {
        const char = 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890';
        const random = Array.from(
            {length: lenth},
            () => char[Math.floor(Math.random() * char.length)]
        );
        const randomString = random.join("");
        return setString(randomString);
    }

    return (
        <View style={styles.container}>
            <Text>{string}</Text>
            <View style={styles.buttonContainer}>
                <Button 
                    title='generate random string'
                    onPress={() => generateRandomString(10)}
                />
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    buttonContainer: {
        marginTop:10,
    },
});

export default App;

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

It will help you...