Skip to content

A React Native project starter with Typescript, a theme provider with hook to easy styling component, a folder architecture ready and some configs to keep a codebase clean.

License

Notifications You must be signed in to change notification settings

luca-montaigut/react-native-boilerplate

Repository files navigation

React Native Boilerplate

Folder structure

src
├── assets
├── components
│   ├── atoms
│   │   ├── Layout.tsx
│   │   ├── Link.tsx
│   │   ├── Switch.tsx
│   │   └── Text.tsx
│   ├── folder-rules.txt
│   └── index.ts
├── navigators
├── screens
│   ├── WelcomeScreen.tsx
│   └── folder-rules.txt
├── themes
│   ├── ThemeContext.tsx
│   ├── index.ts
│   └── themes.ts
├── translations
│   ├── en
│   │   ├── common.json
│   │   └── index.ts
│   ├── fr
│   │   ├── common.json
│   │   └── index.ts
│   ├── i18n.js
│   └── resources.ts
└── utilities
    ├── constants.ts
    └── helpers.ts

ref: generated using tree src.

Packages

  • typescript
  • @typescript-eslint
  • eslint-react-hook
  • @react-native-community/eslint-config
  • prettier
  • husky (pre-commit)
  • i18next
  • react-native-dotenv
  • react testing library

Rename the project

npx react-native-rename YourProjectName

Theming

Styling was handle with a Context provider and a custom hook (useTheme) to use it. The theme provider detect the color scheme of the device (light or dark) and use it by default or when it change, but you can also switch the theme manually.

You can use your the custom hook "useTheme" like this :

// Component.jsx

const Component = props => {
  const { theme, isDarkMode, setDarkMode } = useTheme();

  return (
    <View style={styles(theme).container}>
      <Switch
        onValueChange={switchState => setDarkMode(switchState)}
        value={isDarkMode}
      />
    </View>
  );
};

const styles = theme =>
  StyleSheet.create({
    container: {
      backgroundColor: theme.colors.mainBackground,
    },
  });

Recommended conventions

About

A React Native project starter with Typescript, a theme provider with hook to easy styling component, a folder architecture ready and some configs to keep a codebase clean.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published