Site icon CodeARIV

Floating Action Button with FlatList in React Native

Image is loading...

The FAB can be created above the FlatList component to do a certain task. So we are creating an app to display a floating action button on top of the FlatList. You can run the final app in both iOS and Android using Expo Snack at

https://snack.expo.io/@ajmalpkc/floating-action-button-with-flatlist.

The app will run on both React Native project with expo and native code. You can also create this floating action button with other react native components.



First, create a basic container with heading for our App and import required to react native components:

See the gist on github.

 

Next, we will create a FlatList component with a few sample data’s as below

See the gist on github.

 

Finally, let’s add a FAB button using TouchableOpacity and Text component of react native.

See the gist on github.

Screenshot for both android and ios
FAB Button in Android and iOS

 

You can get the final code at Expo Snack. You can also run the code on your device.

https://snack.expo.io/@ajmalpkc/floating-action-button-with-flatlist.
Exit mobile version