They help maintain consistent design across platforms and speed up the development process.
What Is React Native Elements?
Unlike manyother React Native component libraries, RNE supports TypeScript syntax.
The library consists of over 30 components that focus on component structure.
Projects built using the expo cli have react-native-vector-icons installed by default, so you dont need to install it.
Thetag is invincible around the component and takes acontainerStyleprop to apply view styles.
These are all external styles for the component.
For example, styling theButtoncomponent:
The code above shows how you could apply styles to a Button component.
One Button uses a defaulttypeprop, and the other uses the custombuttonStyleprop.
Both buttons also use thecontainerStyleprop to add view styles.
With themes, customizing your components to suit the desired design pattern becomes an easy task.
RNE provides acreateTheme()function to style components.
This function will hold theme styles that override every component’s internal or default styles.
RNEs order of precedence places external styles at the top of the hierarchy.
Athemeobject is shipped with RNE, providing numerous default color values out of the box.
TheThemeConsumercomponent will wrap your components rendered with an anonymous function.
This anonymous function takesthemeas a prop.
For example:
ThemakeStyles()hook generator is similar to using a style sheet to define styles.
Like the style sheet, it separates any styling from outside your rendered component.
Referencing thethemeobject inside a components style prop.
They keep your focus on the app’s structure rather than on the details of the design.
