Split StyleSheet keys into dedicated groups to help ease the routing of style groups to nested components.
yarn add react-native-split-styles
Below, we show how we can take a single style prop and route the contents based on predefined presets to separate nested components.
import React from "react";
import { StyleSheet, View, TextInput, Button } from "react-native";
import { useSplitStyles } from "react-native-split-styles";
import FlexPreset from "react-native-split-styles/dist/presets/Flex";
import ShadowPreset from "react-native-split-styles/dist/presets/Shadow";
import TextPreset from "react-native-split-styles/dist/presets/Text";
export default ({ style }) => {
const [flex, shadow, text, { ...extras }] = useSplitStyles(style, FlexPreset, ShadowPreset, TextPreset);
return (
<View style={flex}>
<TextInput style={text} />
<Button style={shadow} />
</View>
);
};