React Native

Question 1

React-Native Components

Answer 1

View
Text
StyleSheet

Question 2

Which Icon library does create-react-native-app give you access to?

Answer 2

https://icons.expo.fyi/

import { Ionicons } from ‘@expo/vector-icons’;

Question 3

touchables

Answer 3

Button
TouchableHighlight
TouchableOpacity
TouchableNativeFeedback
TouchableWithoutFeedback

Question 4

Lists

Answer 4

ScrollView
FlatView
SectionList

Question 5

ActivityIndicator

Answer 5

Is a loading spinner

props:

• size (string)
• color (‘string’)
• hidesWhenStopped (bool)
• size (String)

Question 6

Button

Answer 6

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

Props:

• onPress (function)
• title (String)
• accessibilityLabel(String)
• color(String)
• disabled(bool)
• hasTVPreferredFocus(bool)
• nextFocusDown(Number)
• nextFocusForward(number)
• nextFocusLeft(number)
• nextFocusRight(number)
• nextFocusUp(number)
• testId(String)
• touchSoundDisabled(bool)

Question 7

FlatList

Answer 7

A performant interface for rendering basic, flat lists, supporting the handiest features:

• Fully cross-platform.
• Optional horizontal mode.
• Configurable viewability callbacks.
• Header support.
• Footer support.
• Separator support.
• Pull to Refresh.
• Scroll loading.
• ScrollToIndex support.
• Multiple column support.

item.id}
/>

Main Props:

• data={DATA}
• renderItem={renderItem}
• keyExtractor={(item) => item.id}
• extraData={selectedId}

Question 8

The major difference between ScrollView and FlatList?

Answer 8

FlatList is more performant

ScrollView will load the entire data set, whereas FlatList will only load the data displayed in the view (recycles views)

Question 9

Form Elements

Answer 9

Switch
TextInput
KeyboardAvoidingView

Question 10

Difference between onChange and onChangeText in the TextInput component

Answer 10

While both methods are invoked on value change, onChangeText passes the actual value (text) as the argument. On the other hand, onChange passes the entire event object as an argument. Both are perfectly valid props, but the logic of your event handler will need to be tailored to the prop chosen.

Question 11

difference between loading an image from an external server vs loading an image within the app.

Answer 11

In App:

from external source

Question 12

What is AsyncStorage?

Answer 12

AsyncStorage is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.

Question 13

How is data stored with AsyncStorage?

Answer 13

AsyncStorage will use either RocksDB or SQLite based on what is available.

Question 14

How to add data to AsyncStorage?

Answer 14

function submitEntry({entry,key}){
    return AsyncStorage.mergeItem(CALENDAR_STORAGE_KEY, JSON.stringify({
        [key]:entry,
    }))
}

Question 15

How to remove data with AsyncStorage?

Answer 15

export function removeEntry(key){
    return AsyncStorage.getItem(CALENDAR_STORAGE_KEY)
        .then((results)=>{
            const data = JSON.parse(results)
            data[key] = undefined
            delete data[key]
            AsyncStorage.setItem(CALENDAR_STORAGE_KEY, JSON.stringify(data))
        })

}

Question 16

How to style components in REACT Native?

Answer 16

const styles = {
  image: {
    borderRadius: 5,
    margin: 10,
    width: 48,
    height: 48
  }
};

function Avatar ({ src }) {
  return (

);
}

Question 17

How to style components in REACT Native?

Answer 17

const styles = StyleSheet.create({
  greenLarge: {
    color: 'green',
    fontWeight: 'bold',
    fontSize: 40
  },
  red: {
    color: 'red',
    padding: 30
  },
});

function Avatar ({ src }) {
  return (

);
}

Question 18

Adding more than one style to an element

Answer 18

This will be red, then greenLarge

Question 19

What is the defualt flex-direction in React Native Apps?

Answer 19

column

Question 20

difference between CSS flexbox and Native flexbox?

Answer 20

1. Styled in Javascript (Camelcase instead of hyphens)
2. Column is the default
3. Flex in stead of flex-grow
4. Every element is by default a flex container

Question 21

difference between CSS flexbox and Native flexbox?

Answer 21

1. Styled in Javascript (Camelcase instead of hyphens)
2. Column is the default
3. Flex in stead of flex-grow
4. Every element is by default a flex container
5. Dimensions in Native are unitless

Question 22

How to render platform-specific elements?

Answer 22

Use the Platform API to check devices platform