React Native using NativeBase

It’s an open source framework to build React Native apps over a single JavaScript codebase for Android and iOS. So for make it easier, I am using Native Base. This helps you to build world-class application experiences on native platforms using pre built component for both Android and iOS.

Without Native base, we have to write separate component for Android and iOS manually. For Beginner, NativeBase prove to be huge time saver.

Integrating Native Base to App:

Install native-base:-

$ npm install native-base --save

And Then we can use the native-base component easily.

To know more about native base and it’s components please check: https://docs.nativebase.io/

For Font Icons:

If you want to use font icons in app, then we have to use NativeBase custom fonts that can be loaded using loadAsync function.

Copy below snippet into index.js:

constructor() {
   super();
   this.state = {
     isReady: false,
     isConnected: true
   };
 }
async loadFonts() {
   await Expo.Font.loadAsync({
     Roboto: require("native-base/Fonts/Roboto.ttf"),
     Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
     Ionicons: require("@expo/vector-icons/fonts/Ionicons.ttf")
   });
   this.setState({ isReady: true });
 }
componentWillMount() {
   Amplitude.initialize(AMPLITUDE_KEY);
   this.loadFonts();
 }
render() {
   if (!this.state.isReady) {
     return <Expo.AppLoading />;
   }

After using above snippet, We can use custom font into App.

Thanks for reading this article ♥

I hope you would find this article useful. Feel free to ping me in comment section or @suprabhasupi 😋

🌟 Twitter | 👩🏻‍💻 suprabha.me