react-native-gev
The smartest UI/DX kit for React Native!
🏗 ❗ Work In Progress ❗ 🛠
This package is on development. This readme is a raw draft.
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
style
s in Views when we can only type a singles
? 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:
- A powerful TextInput, with great ready to use integration to
react-hook-form
. Has some very useful presets for common data input. - A really beautiful, validated and customizable
List
component withreact-navigation
integration, allowing simple navigation with aonPressNav: (n) => n('Profile')
. It automatically adds a chevron when this is set! Also has a very usefulswitch
property, to use ourSwitch
! - A Switch that also ready to be used with
react-hook-form
and integrated debounce functionality for sync and async callbacks. - A ready to use
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 convenientFlatList
that uses this RefreshControl. - [To be written]
Installation
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-context
andexpo-status-bar
for StatusBar
react-native-reanimated
for TextInputOutline
@react-navigation/native
for useFocusEffect hook
@expo/vector-icons
for icons
Best practices
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 itstyles
. Less useless letters, better readability and faster typing.
<View s={s.container}/>
...
const s = StyleSheet.create({...})
- When using our
<Text/>
, havet
(text
) as the last property, ands
(style
) before it. Faster to find out the text in this way.
<Text anyOtherProp s={s.text} t='Hi, Earth!'/>
Powered by:
- react-hook-forms
- react-native-shadow-2
- react-native-mask-text
- react-native-size-matters
- pagescrollview
Alternatives
-
react-native-paper - Some components here such as
Snackbar
were built on top of it! It's a popular package but I just don't like most of it. -
react-native-elements - I have used it a bit on the past. The
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. - Tailwind - While Tailwind is useful, it just isn't typesafe and Intellisense'able. I don't like how its styling is done.
Info
- The
/src
is shipped with the package. This ensures the access to the source code. - Some patterns and components were based / built on top of others libs, so we have the best practices. When they do, they have their source properly linked, with all the respect to the authors and to their licenses. This aims to improve them and make them fit better this project.
- We use Portals instead of native Modals. Modals have a good amount of issues and limitations. However, our mFunctions like mSnackbar etc have the m for Modal instead of p for Portal as pSnackbar wouldn't look too good.
- When the component has properties that changes the component's style, they have priority over the styles property, to allow individual customization.
- We use MaterialCommunityIcons as the default icons family. For
Button
'sleftIcon
property, for example, we can pass'email'
to use the corresponding MaterialCommunityIcons icon.
TODO
- i18n maybe in Provider or via global state:
{currency: 'R$', decimalSeparator: ','}