Post Updated: Example to Show the Working of Slider in React Native
One of our old post has been updated for React Native 0.59. Under the Lean Core Project Slider has been moved to its new home @react-native-community/react-native-slider after the launch of React Native 0.59. Have a look at the updated post here.
Post Updated: React Native NetInfo
One of our old post has been updated for React Native 0.59. Under the Lean Core Project NetInfo has been moved to its new home @react-native-community/react-native-netinfo after the launch of React Native 0.59. Have a look at the updated post here.
Post Updated: AsyncStorage in React Native to Store Data in Session
One of our old post has been updated for React Native 0.59. Under the Lean Core Project AsyncStorage has been moved to its new home @react-native-community/react-native-async-storage after the launch of React Native 0.59. Have a look at the updated post here.
Post: Make a Blur Background in React Native
New post added in Libraries section. This is an Example to Make a Blur Background in React Native. To Make a Blur Background in React Native we will use BlurView component from @react-native-community/blur provided by react-native-community. In this example, we will make a simple screen with a Switch to switch between simple and blurred screen and three buttons to switch different type of blur effects.
Post: Tab View inside Navigation Drawer / Sidebar with React Navigation
New post in UI & UX section added. This is an example of Tab View inside Navigation Drawer / Sidebar with React Navigation in React Native. We will use react-navigation to make a navigation drawer and Tab in this example. In this example, we have a navigation drawer with 3 screens in the navigation menu and a Tab View on the first screen of the Navigation Drawer. When we open Screen1 the Tab will be visible and on the other options, this Tab will be invisible.
Post: How to Hide Navigation Option from Navigation Drawer / Sidebar
New post in UI & UX section added. This post is about How to Hide Navigation Option from Navigation Drawer / Sidebar in React Native. We will use react-navigation to make a navigation drawer in this example. In this example, we have a navigation drawer with 4 screens but only 3 navigation option available in the Drawer Menu. On the first screen, we will have a button to open a screen which is a part of the navigation drawer but it is not visible in the Drawer Menu options.
Post: Custom Navigation Drawer / Sidebar with Image and Icon in Menu Options
New post in UI & UX section added. In Custom Navigation Drawer / Sidebar with Image and Icon in Menu Options, we have a navigation drawer with 3 screens in the navigation menu. We will make the custom sidebar in place of the simple navigation drawer and in the custom Sidebar, we will have a profile image and an array of option name with the icon and there targeted navigation screen. With the help of a loop and this array, we will make N number of options with the icon in the Navigation Drawer.
Post: Navigation Drawer / Sidebar Menu with Sectioned Menu Options & Footer
New post in UI & UX section added. In Navigation Drawer / Sidebar Menu with Sectioned Menu Options & Footer, we have a navigation drawer with 3 screens in the navigation menu. We will make the custom sidebar in place of the simple navigation drawer and in the custom Sidebar, we can make N number of headings and subheadings as sectioned options using a loop.
New Category UI & UX Started
Hey Guys, As per the suggestions of some AboutReact Family members we have created a new category called UI & UX. In this category, we will update the posts regarding the Stylesheet Tricks, Complex Views and many more. So stay tuned for the upcoming posts.
play.js an IDE for iPhon and iPad
I know this is kind of wired to say that you can make React Native Apps on iPhone and iPad. Yes, you heard it right, you can use iPhone or iPad to develop fast and reliable applications with a full fledge code editor that features code autocompletion, a file navigator, documentation, syntax highlighting for many languages. You can share your projects uploading them to play.js servers or directly managing your code from the Files app that iOS includes.
Your scripts and apps will run locally so no computer or internet connection needed!
You can get the app from iTunes by paying $3.99 (299 INR).
WebView extracted from the react-native core has new home under Lean Core
I have already described the Lean Core project running by the React Native Team. In progress to remove the unwanted components and to make the separate libraries for some components, they have moved the WebView component to the new Home @react-native-community/react-native-webview.
AboutReact have the following examples which are using the WebView component from the react-native:
- Open any Website in React Native WebView.
- React Native Load Local HTML File in WebView.
- React Native Show Progress bar While Loading WebView.
So instead of updating the old one, I have added a new post which is a combination of above all. Please have a look.
`react-native link` without package name is Deprecated
Yeah, you heard it right `react-native link` without package name is now deprecated and will be removed in next version. You can find more details in `react-native link` without package name is Deprecated post.
Separate Libraries under Lean core Project in React Native Version 0.59
For the past several months React Native Core Community has been discussing and making progress on a project called “Lean Core“. Over the years React Native has accumulated a lot of parts that are now outdated, unused or otherwise legacy.
So the big point of discussion was “React Native is a huge repo. Would it make sense to move UI components (ScrollView, Switches, WebView) and Native Modules like PushNotifications, etc into separate repos?”
The basic answer was yes, and in the past few months, this has started becoming reality via a few proposals and some commits from the FB team. They decided that it’s time to clean everything up and put the repository into a much more manageable state going forward.
In the process of that, they have moved many React Native component to a new Home like AsyncStorage is deprecated from the react-native library and now has a new separate library react-native-async-storage. This is not just a single library there are many libraries which are moved and can be used from there. You can follow Separate Libraries under Lean core Project in React Native Version 0.59 post. I’ll update all the updated library there.
Android support cleaned up following Google’s latest recommendations in React Native 0.59
In React Native Version 0.59 according to Google’s latest recommendations, Android support has been cleaned up, which may result in potential breakage of existing apps.
This issue might present as a runtime crash and a message, “You need to use a Theme.AppCompat theme (or descendant) with this activity”. For that you need to update your project’s
AndroidManifest.xmlfile, making sure that the
android:themevalue is an
AppCompattheme (such as
react-native-git-upgrade command has been removed in 0.59, in favor of the newly improved
react-native upgrade command.
Upgrading to React Native Version 0.59 using rn-diff-purge
To upgrade to 0.59, RN Team recommend using
rn-diff-purge (Which was a separate repository but now included in the official repository) to determine what has changed between your current React Native version and 0.59, then applying those changes manually.
Once you’ve upgraded your project to 0.59, you will be able to use the newly improved
react-native upgradecommand (based on
rn-diff-purge!) to upgrade to 0.60 and beyond as newer releases become available.
CLI (Command Line Interface) improvements with React Native Version 0.59
While making a React Native Application React Native’s command line tools are the first thing that we have to use, but they had long-standing issues and lacked official support.
- Logs are formatted much better now
- Commands now run nearly instantly.
Faster App launch with React Native 0.59
This feature will affect the apps with a deep and varied component architecture. The developers who develop the complex component structure will see the most improvement.
In this update applications load resources as needed rather than slowing down launch. This feature is called “inline requires”, as it lets Metro identify components to be lazy loaded.
Introduction of Hooks in React Native Version 0.59
React Hooks are part of React Native Version 0.59, which let you reuse stateful logic across components. Hooks let you use state and other React features without writing a class. Take a look at some of the wonderful resources to get the idea about the hooks:
- Introducing Hooks explains why we’re adding Hooks to React.
- Hooks at a Glance is a fast-paced overview of the built-in Hooks.
- Building Your Own Hooks demonstrates code reuse with custom Hooks.
- Making Sense of React Hooks explores the new possibilities unlocked by Hooks.
- useHooks.com showcases community-maintained Hooks recipes and demos.
Be sure to give this a try in your apps. We hope that you find the reuse as exciting as we do
React Native 0.59 is here March 2019
Welcome to the 0.59 release of React Native! Here you can find the new updates. Stay with us for the new updates.
New Updated UI of AboutReact
Hello Guys, We have updated the UI of AboutReact and looking for the suggestions from your side. If you have any idea or suggestion feel free to contact us.