React Native Online Test

Consider the following React Native components:

const SecurityContext = React.createContext({ username: "", permissions: [] });

const ControlsComponent = (props) => {
  return (
    <SecurityContext.Provider value={{ username: props.username }}>
      <LogoutWrapper></LogoutWrapper>
    </SecurityContext.Provider>
  );
};

const LogoutWrapper = (props) => {
  var context = React.useContext(SecurityContext);
  
  return (
    <View>
      <Text>{context.username}</Text>
      <Button title="Click here to logout"/>
    </View>
  );
};

Select all the correct statements if ControlsComponent is rendered with the username prop equal to "James".

Consider the following code for a SoundBoard component in React Native:

const createSoundItem = ({item, index, onPressPlay}) => {
  return (
    <View>
      <Text>{item.name}</Text>
      <Button title="Play" onPress={() => onPressPlay(item.id)} />
    </View>
  );
};

const SoundBoard = ({sounds, onPressPlay}) => {
  return (
    <SafeAreaView>
      <FlatList
        data={sounds}
        renderItem={parameters => createSoundItem({...parameters, onPressPlay})}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
};

The following array is passed as the sounds prop of the SoundBoard component:

[{ id: "001", name: "Glass Break" }]

What is true about the functionality of the SoundBoard component?

A shopping app made with React Native shows a notification to users for product offers, as shown in the image below:

Fill in the blanks below with appropriate code, so that the component will render with the styling of the image above:

const companyBlue = "#006fad";

const styles = StyleSheet.create({
  container: {
    borderWidth: 2,
    ___________: companyBlue,
    borderRadius: 5,
    padding: 10,
  },
  title: {
    __________: "bold",
    fontSize: 20
  },
  subtitle: {
    _________: "italic"
  },
  primary: {
    color: companyBlue
  }
});

const Notification = ({title, description}) => {
  return (
    <View style={styles.container}>
      <Text style={[styles.title, styles.primary]}>{title}</Text>
      <Text style={[styles.subtitle, styles.primary]}>{description}</Text>
    </View>
  );
};