Custom breakpoints are invalid

[1280103995]

I created a new project on RN 0.73.4 and used the code in App.tsx in the example.

<BreakpointsProvider breakpoints={[1440, 1290, 1080, 828]}>
     <View style={styles.container}>
        <Text style={styles.text}>Device Size: {deviceSize}</Text>
        <Text style={styles.text}>Color: {DEVICE_COLOR[deviceSize]}</Text>
        {isLargerThan(DEVICE_SIZES.LG) && <Text>This text is rendered for large and Extra Large devices</Text>}
    </View>
</BreakpointsProvider>

[1280103995]

I watched the tutorial again and solved my problem.

function MainComponent() {
  const styles = useStyles()
  const deviceSize = useDeviceSize()
  const { isLargerThan } = useSizeRender()

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Device Size: {deviceSize}</Text>
      <Text style={styles.text}>Color: {DEVICE_COLOR[deviceSize]}</Text>
      {isLargerThan(DEVICE_SIZES.LG) && <Text>This text is rendered for large and Extra Large devices</Text>}
    </View>
  )
}

export default function App() {
  return (
    <BreakpointsProvider breakpoints={[1440, 1290, 1080, 828]}>
      <MainComponent/>
    </BreakpointsProvider>
  )
}