Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 25, 2022 10:43 am GMT

NEW WAVE OF WRITING REACT-NATIVE

Doing react-native for some while is the best decision I have made. React-native comes with a lot import components to create something simple and I have found the best way for your code structure.

I will start by showing a simple react native app from react-native docs and the new wave of writing react-native

`import React from react;
import { Text, View } from react-native;

const YourApp = () => {
return (


Try editing me!


);
}`

export default YourApp;

A normal react-native developer will know you would have to write multiple view statements to keep your design and layout in sync, with multiple texts as the case maybe.

As I continue to write react-native along the way I found you could simplify your code to the simplest form by using the as keyword in imports.

This is a very good example from my code.
`
import { StyleSheet as SS, Text as T, View as V, Image as I, Dimensions as D } from react-native;

import { Entypo, Ionicons, MaterialIcons } from @expo/vector-icons;

const MiniCard = () => {

return (

<I

source={{uri: https://media.istockphoto.com/photos/teenage-girl-walking-on-sea-pier-picture-id683607708?b=1&k=20&m=683607708&s=170667a&w=0&h=ADhvhBmJqCAIyY5Q6Id4Lmx_XzsAXDxsvIhmlS4AtcY="}}

style={{

width: 45%,

height: 100

}}

/>

<T

style={{ fontSize:17, width: D.get(screen).width/2}}

ellipsizeMode=tail

numberOfLines={3}

This is an amazing course this is an amazing course this is an amazing course this is an amazing course this is an amazing course

coders never quit

)

}
export default MiniCard`

Using the as keyword, I capitalized the first letter of each component as the new name.

using only the first capitalized letter makes my code much more simplistic and readable, creating enough space for inline styling, component props like style and so on.

I have always tried to make my code more simple as possible and neat, This is the best way so far to make your code more neat and easily readable. Being familiar with this comes with a lot of possibilities, ordinary a D means Dimensions. Instead of writing Dimensions all over again anywhere you need it, you just have to write D.

As previewed, some inbuilt components starts with the same letter like ScrollView and StyleSheet, so i break them into syllables and use them as they sound, e.g scroll-view, try pronouncing that at once you will get skrrrriew, lol or whatever that may sound like, ScrollView as SV and StyleSheet as SS, that makes it much better and much simplistic because you dont have to write much code in comparison to the normal way.

I consider this new wave of writing react-native as it enhances readability, good code structure and promotes simplicity.

https://github.com/Olabisim/youtube you can download my code on github to get a preview of how it looks

I would love to hear your comments about this.

Thank yyou.


Original Link: https://dev.to/olabisim/new-wave-of-writing-react-native-11hj

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To