React Native Create Beautiful Social Icons Button using React Native Elements Example Tutorial

React Native Elements is an amazing react native library used by hundreds of peoples around the react development arena. React Native Elements comes with multiple custom components which can be used to create your own modified components in react native. In today’s tutorial we would use React Native Elements library with react-native-vector-icons library to Create Beautiful Social Icons Button in react native both android and iOS mobile app. We would make circular social sharing buttons and also normal buttons which social icons. So in this tutorial we would React Native Create Beautiful Social Icons Button using React Native Elements Android iOS Example Tutorial.

Contents in this project React Native Create Beautiful Social Icons Button using React Native Elements Android iOS Example Tutorial:

1. Before starting writing code we have to install 2 libraries in our current react native project first is React Native Elements and second is react-native-vector-icons. So open your react native project root folder in Command Prompt or Terminal like i did in below screenshot and execute below command to install the React Native Elements library.

Screenshot:

Screenshot after done installation:

2 Now we have to install react-native-vector-icons library because all the icons is coming form react-native-vector-icons library and we must install the vector icons library in order to use all the social sharing icons. So again open your react native root project folder in command prompt and execute below command.

Screenshot:

Screenshot after done installation:

3. Now the installation part has done. Next step is to link the vector icons library to our react native project. Because by default this library dose not link to project root structure we have to link it manually. So again open your react native project root folder in command prompt like i did in below screenshot and execute below command.

Screenshot:

4. Now all the things has been setup its time to start the coding for app. So open your project’s main App.js file and import StyleSheet, View, Text and ScrollView component.

5. Import SocialIcon component from react-native-elements library in your react native project.

6. Create our main export default App extends component.

7. We are creating ScrollView component in render’s return block because we would put multiple icons in here and they won’t be visible on screen if they were not in ScrollView.

8. Creating 1 Text component and multiple SocialIcon components.

  • type : is the Icon name. You will find all the Icons list here.
  • onPress : Used to set onPress on Click event on Icon clicked.

Screenshots of Round Social icons:

React Native Create Beautiful Social Icons Button using React Native Elements Example Tutorial9. Creating again multiple type of Social Buttons.

  • title : Used to set the title text of button.
  • button : To make the social button.
  • type : To set the Icon Name.
  • onPress : Used to set the onPress on Click event on social button.

Screenshots:

React Native Create Beautiful Social Icons Button using React Native Elements Example Tutorial

10. Creating Style.

11. Complete Source Code for App.js file:

Screenshots:

React Native Create Beautiful Social Icons Button using React Native Elements Example Tutorial React Native Create Beautiful Social Icons Button using React Native Elements Example Tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *