Is this a good structure to use react native paper in my app?

[JoaoHamerski]

I created a folder ./src/styles/ to keep all my component styles.

Within that folder I put a file with the respective components name:

• If I have an App.jsx
• I create a ./src/styles/App.style.js file

This is the content of this file:

import { StyleSheet } from "react-native"
import { useTheme } from "react-native-paper"

export const useAppStyles = () => {
    const theme = useTheme()
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: theme.colors.background        
        },
        text: {
            fontSize: 50,
            color: theme.colors.primary
        }
    })

    return { theme, styles }
}

Then in my component I use it like this:

import { useAppStyles } from './styles/App.styles'

const App = () => {
  const { styles, theme } = useAppStyles()

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, world!</Text>
    </View>
  )
}

I wonder if this is a good approach or it may lead to performance problems.