Jumping Flutter to ReactNative
Here are some observations from a Flutter Developer to start with React-Native Application development
So let’s start with the basic thing first in the #flutter application we generally start with building our custom widgets, which are basically tiny elements that are collaboratively made into one screen.
There is one famous design system for that too knowns as #atomicdesign Here is a good explanation for that.
=> As we have #widgets in Flutter there are #components in react-native
Below are some widgets to components mapping which will be the building blocks of our hybrid application.
Flutter -> React Native
Container -> View
Text -> Text
Column -> We can wrap multiple components in View it will by default act as a Column
Row -> We can use View with style: flexDirection:’row’
Image -> Image (We can use Image class with different source options)
ListView -> ScrollView
=> Apart from this, there are lots of packages present in react-native for building other widgets like Divider, CheckBox, TabBar, etc. For designing beautiful UI components we can use CSS styling in almost every component.
=> For TextEditingController and managing variables we can use ReactHook like useState().
simple syntax for defining a useState() as
const [variable, setVariable] = useState(dataType);
later we can update with `setVariable(new data of dataType)`
=> For Navigation between screens, we can wrap our App with `NavigationContainer` and use a navigation prop from the component to push into a new screen, we can also use the route to pass data to a new screen. see details
=> For managing state in the application We can use Redux and wrap our application with ReduxProvider. You can find the example code over the internet easily. See details
=> For fetching data from API we can use the fetch() method, and reloading UI with updated data we can use the useEffect() hook from ‘react’. See `fetch()` method
P.S. It’s just a few observations for a flutter developer to start with React-Native. There might be a better way of handling things and states are present, any feedback is appreciated.
