In NativeBase, how can I avoid inline styling props of component and write it separately and then pass it

Question

I am just trying to write a clean code and avoid lots thing in same tag. For example: Text and Box component have could have so many styling props, So is there any way I can write it separately and they pass it as a whole object as style.

import { Box, extendTheme, NativeBaseProvider, Progress, Text, View } from 'native-base'
import React, { FC } from 'react'

const TrainingList: FC = () => {
    return (
        <NativeBaseProvider>
            <Box my="2">
                <Text fontSize="16" lineHeight="21.8" bold> Annual Training </Text>
                <View my="2" >
                    <Text fontSize="14" lineHeight="19.8"> Due in 2 days (01/12/22) </Text>
                    <Text fontSize="14" lineHeight="19.8"> 50% complete / 10 hrs left </Text>
                </View>
                <Progress rounded="12" colorScheme="warning" bg="#D7D7D7" size="sm" value={65} mx={0} />
            </Box>
            <Box mt="5">
                This is Box2
            </Box>
        </NativeBaseProvider>
    )
}

export default TrainingList

Answer 1

In my eyes, the best approach will be to add variants to the NativeBase Text and Box component. It'll keep your code but also you'll be able to share consistent style throughout the codebase.

And if you wanna know HOW? I'm sharing a few resources to follow.

Resource:

• Official Docs: First place to go.
• Snack: A demo snack to show how to add variants.
• Blog: To better understand how to effectively customise NativeBase components.