React Native Support

[softmarshmallow]

Add React Native support

- https://reactnative.dev/

Concepts

Pre-requirements

RN Core components declaration

import { View, Text, Image, ScrollView, TextInput } from 'react-native';

https://reactnative.dev/docs/next/intro-react-native-components

• View
• Text
• Image
• ScrollView
• TextInput

More

• FlatList
• Platform - e.g. height: Platform.OS === 'ios' ? 200 : 100

Expo & Preview

Styling

https://reactnative.dev/docs/style

{} obj style

    <View style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
    </View>

StyleSheet

import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

//     <View style={styles.container}/>

Variations

Colors

https://reactnative.dev/docs/colors

onPress instead of onClick

https://reactnative.dev/docs/handling-touches

<Button
  onPress={() => {
    alert('You tapped the button!');
  }}
  title="Press Me"
/>

Background Image

Background Image via Nesting

A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the component, which has the same props as , and add whatever children to it you would like to layer on top of it.

return (
  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
  </ImageBackground>
);

Navigation

• @react-navigation/native

Animations

• Animated API - https://reactnative.dev/docs/animations
• moti - A framer-motion like animation library for react-native and web https://github.com/nandorojo/moti

A11y

• https://reactnative.dev/docs/accessibility

Assets

<Image source={require('./my-icon.png')} />

<Image
  source={{ uri: 'app_icon' }}
  style={{ width: 40, height: 40 }}
/>

<Image
  source={{ uri: 'asset:/app_icon.png' }}
  style={{ width: 40, height: 40 }}
/>

<Image source={{uri: 'https://reactjs.org/logo-og.png'}}
       style={{width: 400, height: 400}} />

<Image
  style={{
    width: 51,
    height: 51,
    resizeMode: 'contain'
  }}
  source={{
    uri:
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='
  }}
/>

svg
react-native-svg

import * as React from "react"
import Svg, { Path } from "react-native-svg"

function SvgComponent(props) {
  return (
    <Svg
      style={{
        flex: 1
      }}
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <Path d="M10 10H110V110H10z" stroke="red" fill="#00f" />
    </Svg>
  )
}

References

• https://reactnative.dev/docs/
• https://reactnative.directory/
• https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native
• https://docs.expo.dev/
• https://expo.dev/
• https://www.npmjs.com/package/@types/react-native
• https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-native
• https://transform.tools/svg-to-react-native

[softmarshmallow]

RN Initial support added via #117
Will re-open on next milestone