Core Components In React Native Explained With Example

Introduction

In this article, I have explained about core components of react native using visual studio code in mac and given the sample program to understand quickly.

React native is an open-source framework for building android and iOS apps using react native. You can use JavaScript to access your platform’s API and we have use behaviors of UI using react components.

For Android and iOS development. View is the basic building block of UI with small element on the screen. It has used to display text, images, respond to user input and button.

1.Text

import React from 'react';
import {
    Text
} from 'react-native';
const Tree = () => {
    return (
    <Text>Hello, I am your friend Manikandan!</Text>
    );
}
export default Tree;

Output

2. TextInput

import React from "react";
import {
    SafeAreaView,
    StyleSheet,
    TextInput
} from "react-native";
const Tree = () => {
    const [number, onChangeNumber] = React.useState(null);
    return (
        <SafeAreaView>
      <TextInput style={styles.input} onChangeText={onChangeNumber} value={number} placeholder="Please enter your name" keyboardType="numeric" />
    </SafeAreaView>
    );
};
const styles = StyleSheet.create({
    input: {
        height: 40,
        margin: 12,
        borderWidth: 1,
        marginTop: 250,
    },
});
export default Tree;

Output

3.View

import React, {
    useState
} from 'react';
import {
    Text,
    TextInput,
    View
} from 'react-native';
const Tree = () => {
    return (
        <View style={{padding: 10}}>
      <TextInput style={{height: 40}} placeholder="Type here your name!" defaultValue="Manikandan M" />
      <Text style={{padding: 10, fontSize: 42}} /></Text>undefined
    </View>
    );
}
export default Tree;

4. Button

import React from 'react';
import {
    Button,
    View,
    SafeAreaView,
    Text,
    Alert
} from 'react-native';
const App = () => (
  <SafeAreaView>
    <View style={{marginTop:250,marginLeft:20}}>
      <Text style={{textAlign: 'center'}}> This is Manikandan, I would like explain about button control with event triggring and its help you understand with simple example. </Text>
      <Button style={{marginTop:20}} title="Press me" color="#f194ff" onPress={()=> Alert.alert('Simple Button pressed')} />
    </View>
  </SafeAreaView>
);
export default App;

Output

5. Image

import React from 'react';
import {
    View,
    Image,
    StyleSheet,
    Text
} from 'react-native';
const styles = StyleSheet.create({
    container: {
        paddingTop: 200,
        paddingLeft: 20,
        paddingRight: 20
    },
    tinyLogo: {
        width: 150,
        height: 150,
    },
    logo: {
        width: 66,
        height: 58,
        paddingLeft: 350
    },
});
const Tree = () => {
    return (
        <View style={{paddingTop:150}}>
      <Text style={{textAlign:'center'}}>Hi, This is Manikandan. help you to set image using react native. </Text>
      <Image style={{width:100,height:100,paddingLeft:100,paddingTop:20}} source={{  uri: 'https://reactnative.dev/img/tiny_logo.png',  }} />
    </View>
    );
}
export default Tree;

Output

6. Switch

import React, {
    useState
} from "react";
import {
    View,
    Switch,
    StyleSheet,
    Text
} from "react-native";
const Tree = () => {
    const [isEnabled, setIsEnabled] = useState(false);
    const toggleSwitch = () => setIsEnabled(previousState => !previousState);
    return (
        <View>
      <Text style={{marginLeft:20,marginTop:100, textAlign:"center"}}>Hi There, This is Manikandan and I have explained swtich control</Text>
      <Switch style={{marginLeft:150,marginTop:20}} trackColor={{ false: "#763477", true: "#EQDDED" }} thumbColor={isEnabled ? "FX33ED" : "#FDESDE" } ios_backgroundColor="#3E3D3A" onValueChange={toggleSwitch} value={isEnabled} />
    </View>
    );
}
export default Tree;

output

7.ScrollView

import React from 'react';
import {
    Text,
    ScrollView
} from 'react-native';
const Tree = () => {
    return (
         <ScrollView>
        <Text >
         Hi, This is Manikandan. I would like to explain about
         scrollview in react native and its similar to native
         platform wise scrollable.
        </Text>
      </ScrollView>
    );
}
export default Tree;

8. FlatList

import React from 'react';
import {
    SafeAreaView,
    View,
    FlatList,
    StyleSheet,
    Text,
    StatusBar
} from 'react-native';
const DATA = [{
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
}, {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
}, {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
}, ];
const Item = ({
    title
}) => ( < View style = {
    styles.item
} > < Text style = {
    styles.title
} > {
    title
} < /Text> < /View>);
const Tree = () => {
    const renderItem = ({
        item
    }) => ( < Item title = {
            item.title
        }
        />);
    return ( < SafeAreaView style = {
            styles.container
        } > < FlatList data = {
            DATA
        }
        renderItem = {
            renderItem
        }
        keyExtractor = {
            item => item.id
        }
        /> < /SafeAreaView>);
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
    },
    item: {
        backgroundColor: '#f9c2ff',
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
    },
    title: {
        fontSize: 32,
    },
});
export default Tree;

Output

Conclusion

Hopefully, this article has given sufficient information for you to understand the core components of react native, and I will keep updating the core components in the future. Feel free to leave a comment if you would like me to further elaborate on anything within this article.