react-native-start v0.2.56

react-native-start

Start kit for react native developing

!!! Breaking changes

from 0.2.51 are updated styles and form components

• Form's functions calls without current key
• for styles is need to use useStyles hook

Libraries:

yarn add dayjs @react-native-async-storage/async-storage @react-native-community/blur @react-native-community/datetimepicker axios dayjs events lottie-ios@3.1.8 lottie-react-native qs ramda react-native-config react-native-image-picker react-native-gesture-handler react-native-linear-gradient react-native-navigation react-native-navigation-hooks react-native-svg react-redux redux redux-actions redux-promise-middleware redux-thunk

yarn add -D @babel/plugin-proposal-decorators @types/ramda babel-plugin-module-resolver react-native-svg-transformer

If needed:

base64-arraybuffer, react-native-fs,

Deprecated:

moment -> dayjs

Addition installation steps

1. General

• In XCode platform set to "11.0"
• In XCode add swift file with creating bridge file
• In ios/Podfile platform set to "11.0"
• In ios/Podfile change

  use_flipper!('Flipper' => '0.75.1', 'Flipper-Folly' => '2.5.3', 'Flipper-RSocket' => '1.3.1')

  This

2. Wix Navigation

• Delete ios/Podfile.lock and ios/Pods
• run npx rnn-link

3. Experimental decorators

• install dev dependency @babel/plugin-proposal-decorators
• add to babel.config.js:

plugins: [
[
  '@babel/plugin-proposal-decorators',
  {
    legacy: true,
  },
],
],

• uncomment in tsconfig.json:

{
   "experimentalDecorators": true
}

4. Prettier config

• Set bracketSpacing to true

Theming

Wrap Component to Themed to allow children change style by theme OR pass options when register the screen.

<Themed>
  <Component/>
</Themed>

function Component() {
  const { theme } = useTheme();
  return ...
}

OR

const options = Screen.Navigator.getInitialOptions();
options.theme.props.initialTheme = StyleGuides.THEME.SOME;

Screen.Navigator.registerScreen(name, ScreenComponent, undefined|Provider, options);

Addition Libraries:

yarn add @react-native-firebase/app @react-native-firebase/messaging @stripe/stripe-react-native react-native-device-info react-native-image-marker react-native-maps react-native-text-input-mask

yarn add react-native-geolocation-service

yarn add react-native-flipper, redux-flipper