This is a compilation of all the research and comparisons I’ve done for various topics while working with React Native.

package.json Syntax

http://gunnariauvinen.com/what-do-the-and-mean-in-package-json/

Helper Tools

https://github.com/dsmelov/simsim

Visual Studio Code

CodeHelper is eating up CPU and freezing the editor

https://github.com/Microsoft/vscode/issues/35614

CocoaPods

https://stackoverflow.com/questions/37089041/can-i-delete-the-xcodeproj-after-pod-install

How To

Update value in state array

https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-reactjs Also to prepend values to an array https://stackoverflow.com/questions/6195729/most-efficient-way-to-prepend-a-value-to-an-array

Scale Font to Parent Component

• https://medium.com/@vygaio/how-to-auto-adjust-text-font-size-to-fit-into-a-nodes-width-in-react-native-9f7d1d68305b
• https://stackoverflow.com/questions/33628677/react-native-responsive-font-size
• https://facebook.github.io/react-native/docs/pixelratio.html#getfontscale
• https://blog.solutotlv.com/size-matters/
• https://github.com/facebook/react-native/commit/3f49e743bea730907066677c7cbfbb1260677d11
• https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container/19814948#19814948
• https://github.com/facebook/react-native/issues/728

Troubleshooting

eslint + prettier makes you do some weird stuff:

eslint no-mixed-operators prettier removes

https://github.com/prettier/prettier/issues/187

padding in react-native-vector-icons

https://github.com/oblador/react-native-vector-icons/issues/25

Unable to connect to Android device (happened on linux)

https://facebook.github.io/react-native/docs/running-on-device.html https://docs.expo.io/versions/latest/introduction/installation.html

https://github.com/facebook/react-native/issues/12214 https://github.com/facebook/react-native/issues/2711 https://stackoverflow.com/questions/26213954/how-to-solve-adb-device-unauthorized-in-android-adb-host-device https://nelenkov.blogspot.com/2013/02/secure-usb-debugging-in-android-422.html

adb devices ??????? no permissions

https://stackoverflow.com/questions/9210152/set-up-device-for-development-no-permissions https://stackoverflow.com/questions/14460656/android-debug-bridge-adb-device-no-permissions https://askubuntu.com/questions/908306/adb-no-permissions-on-ubuntu-17-04 https://facebook.github.io/react-native/docs/running-on-device.html https://stackoverflow.com/questions/9210152/set-up-device-for-development-no-permissions https://github.com/facebook/react-native/issues/12214 https://stackoverflow.com/questions/43573709/android-7-1-2-adb-fails-no-permissions-on-ubuntu-17-04 http://turlucode.com/linux-android-adb-fix-permissions/ https://developer.android.com/studio/run/device.html#rsa

Interesting StackOverflow Questions

• https://stackoverflow.com/questions/48269124/create-a-hole-in-react-native-webview-for-touch-events
• https://stackoverflow.com/questions/48330207/two-columns-in-rn-flatlist

Interesting StackOverflow Answers

• https://stackoverflow.com/questions/29810914/react-js-onclick-cant-pass-value-to-method#answer-29810951

If I understand the question to mean rendering a single FlatList in a two column layout, then this can be accomplished like so:

1. Set numColumns prop of FlatList to 2.
2. For your contentContainerStyle, use justifyContent: 'space-around' to get even margins.
3. For the components that you are rendering, you have two options:
   1. Calculate your desired width and margins using Dimensions.
   2. Wrap the renderItem component in a <View> that has width: '50%' as it’s style.

Example for method 1 (snack):

import React, { Component } from 'react';
import { Text, StyleSheet, FlatList, Dimensions } from 'react-native';
import { Constants } from 'expo';
import { Card } from 'react-native-elements';

// spacing is the desired margin all around the rendered components.
const spacing = 10;
const width = (Dimensions.get('window').width - 4 * 10) / 2;

export default class App extends Component {
  state = {
    data: [
      {
        id: '1',
        text: 'lorem ipsum',
      },
      {
        id: '2',
        text: 'lorem ipsum lorem ipsum lorem ipsum',
      },
      {
        id: '3',
        text: 'lorem ipsum lorem ipsum',
      },
    ]
  };

  keyExtractor = (item) => item.id;

  renderItem = ({ item }) => (
    <Card
      image={require('./assets/beach.png')}
      containerStyle={styles.card}
    >
      <Text style={{margin: 10}}>
        {item.text}
      </Text>
    </Card>
  );

  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={this.renderItem}
        keyExtractor={this.keyExtractor}
        style={styles.container}
        contentContainerStyle={styles.list}
        numColumns={2}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    flexDirection: 'column',
  },
  list: {
    justifyContent: 'space-around',
  },
  card: {
    width: width,
    margin: spacing,
  },
});

Copyright © 2011-2020 Ho Yin Cheng