Translator: Front-end wisdom

Original text: codingislove.com/top-15-reac…

Click “like” and then look, wechat search [Big Move the world] pay attention to this person without dACHang background, but with a positive attitude upward. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

This list of React Native libraries isn’t just a random search from the Internet. These are the ones I use in my own application. These libraries probably have the same functionality as other libraries, but after a lot of research and trying it out in my program, I chose them.

The library is perfect for quickly adding simple animations and transformations to React Native applications. This library can be used in two ways: declarative and imperative.

Declarative usage simply uses the name of the animation, which takes effect immediately when the element is loaded. When you open the page, the title should slide in from the left.

This wGY imperative is great if you want to play animations manually. When someone likes a post, shake a heart icon.

You can also define your own animation! For complex animations, look for the React Native Animated API.

The actual case

14. React Native Push Notification

This library supports local push notifications more fully. It has features not found in other libraries, such as schedule notification, repetitive notification based on day, week, and time.

If your application is available offline and requires push notifications, this library is your choice.

13. React Native FCM

If your application needs to use GCM or FCM to send remote notifications from the server, then this library is one of your options. FCM is just the latest version of GCM.

The library also supports local notifications with scheduling and repeat support. Therefore, if you need both remote and local notifications, you can use Response-native FCM

12.React Native Hyperlink

A simple React-Native hyperlink component makes urls, fuzzy links, emails, and more clickable. It also supports styling links. As long as you pass the Text component as a child to the Hyperlink component, the library takes care of everything.

The actual case

11. React Native Sound

You need a library to play sound or music in your app. I use this library to play the application sound and play the recorded answers.

The actual case

Here’s a demo video of the React Native app’s sound:

youtu.be/DpE_8j-aq0I

10. React Native loading spinner overlay

A simple but very useful component. You can use this component when you want to prevent the user from doing anything else while working on something. This component also does a good job by handling the back button in Android. Example: Submit a post

9. React Native Progress

In an application, it is important to show the progress of loading or any other operation. This library makes it easy to display progress by supporting five different components, such as linear progress bars, circles, pie charts, etc.

The actual case

8. React Native Swiper

React Native Swiper is useful for implementing App intro, Image Carousel and Image Galleries.

Here’s the React Native Swiper demo video:

www.youtube.com/watch?v=LdK…

7. React Native Share

Share components with UI customization, which also supports file sharing.

The actual case

6. React Native Photo View

Image component with zoom support, onload callback, zoom to fit and scroll indicator support. This component has a high resolution image problem. Of course, this isn’t a specific problem with React Native. Memory issues are common on Android when there are high resolution images.

5. React Native Image Picker

This is the basic library for image uploading or image processing. It allows you to select from the gallery and take photos from the camera. Another useful feature I like in this library is the option to select image resolution, which solves memory problems caused by high resolution images.

4. React Native Simple Store

This library is just a wrapper around React Native’s built-in AsyncStorage API, but it’s very useful because of Promises, L-chained calls, and super simple apis.

3. React Native Vector Icons

This is the best Icon component. It comes bundled with 10 icon sets, an icon button component, and allows you to import custom icon sets using glyphs, Fontello, and TTF files.

Bundled icon set:

  1. Entypo by Daniel Bruce (411 icons)
  2. EvilIcons by Alexander Madyankin & Roman Shamin (v1.8.0, 70 icons)
  3. FontAwesome by Dave Gandy (v4.7.0, 675 icons)
  4. Foundation by ZURB, Inc. (v3.0, 283 icons)
  5. Ionicons by Ben Sperry (v3.0.0, 859 icons)
  6. MaterialIcons by Google, Inc. (v3.0.1, 932 icons)
  7. MaterialCommunityIcons by MaterialDesignIcons.com (v2.0.46, 2046 icons)
  8. Octicons by Github, Inc. (v5.0.1, 176 icons)
  9. Zocial by Sam Collins (v1.0, 100 icons)
  10. SimpleLineIcons by Sabbir & Ficolin-3 (V2.4.1, 189 ICONS)

2. React Native Modalbox

This Modal library is built on the React Native Modal component, but comes with many customizations and features. It has all the functionality you need to use Modals in your application.

The actual case

1. React Native Router Flux

Navigation is one of the major issues in the React Native community because it doesn’t have a default navigation system. No matter what happens with React Native, the navigation system is always changing or unstable.

This library helps me quickly navigate using a very simple declarative API. It maintains a bunch of paths and navigates from any scene in the application to any scene as simple as calling a function.

It also supports tabbed navigation, sidebars, and modal boxes. A modal box can be defined as a scene so that a mode can be invoked from any scene.

You can already use React Native Router Flux and wonder why I use React Native Router Flux? Don’t worry React Native Router Flux V4 is based on React-Navigation and has a simpler API!

Most of the application demonstrations above use React-native-router-Flux as the navigation system.

conclusion

If you use a great React Native library that isn’t on the list above, let me know in the comments below!

Your likes are my motivation to keep sharing good things.

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.