Beyond the React Native Benchmark

@kulkarniankita9 Beyond the React Native Benchmark Ankita Kulkarni, Solutions Architect,
Rangle.io

@kulkarniankita9 Raise your hand ✋ How many of you are
working towards or already have apps in the app store?

@kulkarniankita9 Hi, I’m Ankita!

@kulkarniankita9 Let’s go on a project journey

@kulkarniankita9 From a project perspective

@kulkarniankita9 Bootstrap your project

@kulkarniankita9 Directory structure index.js App.js ios/ android/ src screens login
index.js actions/epic/reducer/selector common components button primaryButton/secondaryButton/tertiaryButton

@kulkarniankita9 Directory structure • Add a package.json to the root
level directory structure so your imports look normal: import { TextInput } from “@app/common/components/form/textInput” And not: import { TextInput } from “../../../../common/components/form/textInput"

@kulkarniankita9 Routing

@kulkarniankita9 React native navigation challenges • Major re-write • Documentation
is

@kulkarniankita9 Do you have an existing web app?

@kulkarniankita9 Business logic

@kulkarniankita9 Business logic • Move your business logic to a
utility library

@kulkarniankita9 Challenges • A lot of shared context made it
diﬃcult to share code Vertical slicing modules eg: auth, biometrics

@kulkarniankita9 From components perspective

@kulkarniankita9 Translations

@kulkarniankita9 Component library

@kulkarniankita9 Common components ✨ • ScrollView • SafeAreaView ⛑ •
KeyboardAwareScrollView ⌨ • Text components: Headings, Body, Captions ✅ • Form components: InputText, Button

@kulkarniankita9 Challenges • Creating basic components was getting diﬃcult to
manage We adopted styled-components for design components We used Stylesheets for screen design

@kulkarniankita9 From a design perspective

@kulkarniankita9 Static assets As a user , I want to
see the company’s logo in the login background company-logo.png [email protected] [email protected] React-native-vector-icons: IcoMoon

@kulkarniankita9 Design tokens

@kulkarniankita9 Use Storybook

@kulkarniankita9 Challenge • Biggest hurdle: Communication between design & dev
Storybook and design tokens

@kulkarniankita9 From a release perspective

@kulkarniankita9 Continuous everything

@kulkarniankita9 Continuous everything • App distribution to devices is easier
• CodePush: Push live updates is faster

@kulkarniankita9 Bugs and regressions

@kulkarniankita9 You can ship hot ﬁxes without going through

@kulkarniankita9 Challenges • There are too many tools out there
that try to solve CI/CD We used VS App Center

@kulkarniankita9 App Store submission checklist • Read the Human 9
Interface Guidelines carefully • Links must be clickable with touchable area • If you are using a 3rd party provider, provide more info • Section: Additional info - provide a lot of detail ℹ • Test Account: Deﬁnitely provide a test account

@kulkarniankita9 Misc.

@kulkarniankita9 Animations with Lottie

@kulkarniankita9 This is pretty much the end.. Questions? Comments? Feedback…make
it positive— Catch me after!!

@kulkarniankita9 You did it

Beyond the React Native Benchmark

Beyond the React Native Benchmark

More Decks by Ankita Kulkarni

Featured

Transcript