Applying styling such as typography and colors to Expo and React Native apps
Theming on React Native and Expo is slightly different from ReactJS because there is only one way to do it, which is by creating a style file that contains all the styles instead of a CSS file. Let's create a file called AmplifyUIStyles.ts in the app directory and do the following:
- Import
StyleSheetfrom thereact-nativemodule:import { StyleSheet } from 'react-native'; - Export the
AmplifyThemeTypetype and the colors. You can change the colors to whatever you want with a hex color, or you can just use the name of a color, as here with'blue':export type AmplifyThemeType = Record<string, any>; // Colors export const deepSquidInk = '#152939'; export const linkUnderlayColor = '#FFF'; export const errorIconColor = '#DD3F5B'; export const textInputColor = '#000000'; export const textInputBorderColor = '#C4C4C4'; export...