0

How can I style text in react-native-paper?

I have a dark mode in my app and need light colors for my texts.

I could use a theme, but in my app I am only using this one component from React Native Paper, and besides, I already have a theming in place.

   <DataTable.Cell style={{color: "#fff"}}> // <-- This styling does not work
      Sophia Loren
   </DataTable.Cell>

The above code does not change the font color as for all DataTable components the style prop is of the type ViewStyle, which means it does set, for instance, the background color, but not the font color.

Nimantha
  • 6,405
  • 6
  • 28
  • 69
RdC1965
  • 412
  • 5
  • 8
  • DataTableCell uses the default text styles of react native paper. So you can change the color by changing the react-native-paper's theme https://callstack.github.io/react-native-paper/theming.html Specifically `colors.text` – Ugur Eren Jul 16 '21 at 16:08
  • Thank you, Uğur, but, as said above I would rather not using Paper's theming. Is there any other solution involving only the component? – RdC1965 Jul 16 '21 at 16:23
  • https://github.com/callstack/react-native-paper/blob/main/src/components/DataTable/DataTableCell.tsx#L59 As seen in the source code, DataTable.Cell uses the default Text component of react-native-paper and it doesn't have a style prop. But you can add a prop yourself like `textStyle` and make sure it stays in place with patch-package https://www.npmjs.com/package/patch-package – Ugur Eren Jul 16 '21 at 16:51

2 Answers2

2

I found a very simple solution: nesting a Text component.

  <DataTable.Cell style={{ flex: 0.5 }}>
     <Text style={{ color: "#fff" }}> // <-- This style works!
        Sophia Loren
     </Text>
  </DataTable.Cell>
RdC1965
  • 412
  • 5
  • 8
2

The text in the DataTable cells of React Native can be styled by using the prop called "textStyle". Refer to the documentation for more details and examples.

<DataTable.Cell textStyle={{fontFamily:"Avenir", fontSize:20}}>Ice cream</DataTable.Cell>
Tejas Sharma
  • 33
  • 1
  • 6