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
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 don’t 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.
Top comments (3)
I think this is just making the harder to read and understand. If you are the only reviewer of your code then it doesn't matter anyway...
you haven't tried it, how would you conclude it's harder to read, the way it looks here cannot be compared to the way it looks on vs code
Perfect!