How To Create Custom Components In React Native?

Hello friends, In this post I will show you how to create custom components in react native app.


So first of all we need to create a fresh project using cli.
npx react-native init customComponent
Go to the project directory.
cd customComponent
After this, try to run that blank project on both iOS and android devices. 
npx react-native run-ios  (mac only)
npx react-native run-android
If everything ok, you will see blank React Native app as shown in image.
 
After that we need to create a separate component js file which is our custom component and we will pass props into that component from our main component,  Main component is that in which we want to display data from our custom component, so for that just create custom component like this in project root directory.
  • userComponent.js
    import React from 'react';
    import {ListItem, Text} from 'native-base';
    import PropTypes from 'prop-types';
    
    const UserComponent = ({users, fontSize, fontColor}) => {
      return users.map((item, index) => (
        <ListItem key={index}>
          <Text style={{fontSize: fontSize, color: fontColor}}>{item.name}</Text>
        </ListItem>
      ));
    };
    UserComponent.propTypes = {
      users: PropTypes.array.isRequired,
      fontSize: PropTypes.number.isRequired,
      fontColor: PropTypes.string,
    };
    export default UserComponent;
We are passing usersArray, fontSize and fontColor to our custom component.
After that replace App.js file with this code.
  • App.js
import React, {Component} from 'react';
import {
  Container,
  Header,
  Title,
  Content,
  Body,
  ListItem,
  Text,
} from 'native-base';

import UserComponent from './userComponent';
let usersArray = [
  {
    name: 'Happy',
  },
  {
    name: 'Gulshan',
  },
  {
    name: 'Johnsan',
  },
  {
    name: 'Michael',
  },
  {
    name: 'Peter',
  },
];
export default class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Container>
        <Header>
          <Body>
            <Title>Custom Comonent Users List</Title>
          </Body>
        </Header>
        <Content padder>
          <UserComponent users={usersArray} fontColor={'red'} fontSize={20} />
          <UserComponent users={usersArray} fontColor={'green'} fontSize={10} />
          <UserComponent users={usersArray} fontColor={'brown'} fontSize={15} />
          <UserComponent users={usersArray} fontColor={'blue'} fontSize={30} />
        </Content>
      </Container>
    );
  }
}
Save everything and run the project again by using following commands. 
npx react-native run-ios  (mac only)
npx react-native run-android
You will see output like screenshot and for detailed information please checked the video link I have attached here. Video contains more advance level details.


I hope you like the article regarding Custom Components In React Native. This is how we can create custom component in the React Native app for Android and iOS.
If you have any questions or you want to get a tutorial on some topic, you can comment below. There will be more posts coming soon.
Stay tuned! Bye. 🙂

Post a Comment

0 Comments