While it's already great, useful and being used on prod on two apps, constant breaking changes are still being made to achieve the best DX. I will keep making it more mature to avoid having legacy systems.
There are great known components libs like React Native Elements, React Native Paper... but there are always aspects on them that makes me not think they don't exactly fit my use cases.
This both improves some React Natives components like View and add many other useful components. They are all easily customizable and fast to catch up on how to use it.
Along components, this package adds some very useful, simple and intuitive shortcuts to usual components.
This is opinionated and it's being conceptualized and developed for a long time. This provides a way greater productivity and joy during development.
Why we write hundreds of styles in Views when we can only type a single s? This is really quick to catch up and improves readability and productivity when we are talking about months of work.
Why to have a <Text>My Text</Text> when we can have only <Text t='My Text'/>?
It also adds some common components:
react-hook-form. Has some very useful presets for common data input.List component with react-navigation integration, allowing simple navigation with a onPressNav: (n) => n('Profile'). It automatically adds a chevron when this is set! Also has a very useful switch property, to use our Switch!react-hook-form and integrated debounce functionality for sync and async callbacks.Button that sets a fullscreen loading if the onPress returns a Promise. It also will sets Alert.alert() with the reject message.Themeing:
RefreshControl uses the primary color. There is also a convenient FlatList that uses this RefreshControl.expo install react-native-gev react-hook-form react-native-safe-area-context expo-status-bar react-native-reanimated @react-navigation/native @expo/vector-icons
react-native-safe-area-contextandexpo-status-barfor StatusBar
react-native-reanimatedfor TextInputOutline
@react-navigation/nativefor useFocusEffect hook
@expo/vector-iconsfor icons
Over the time I developed my own practices that aims to improve my DX. And they do!
When defining a StyleSheet, call it s instead of calling it styles. Less useless letters, better readability and faster typing.
<View s={s.container}/>
...
const s = StyleSheet.create({...})When using our <Text/>, have t (text) as the last property, and s (style) before it. Faster to find out the text in this way.
<Text anyOtherProp s={s.text} t='Hi, Earth!'/>Snackbar were built on top of it! It's a popular package but I just don't like most of it.List for example was a wrapper to their List, but it had so many customizations and limitations that I decided to made my own. It's also a good package but don't satisfy my needs./src is shipped with the package. This ensures the access to the source code.Button's leftIcon property, for example, we can pass 'email' to use the corresponding MaterialCommunityIcons icon.
{currency: 'R$', decimalSeparator: ','}