react-native-paper#DarkTheme JavaScript Examples

function ThemeWrapper () {
  const theme = useSelector(i=>i.themes[i.theme]);
  const paperTheme = {
    ...(theme.dark?DarkTheme:DefaultTheme),
    dark: theme.dark,
    colors: {
      ...(theme.dark?DarkTheme:DefaultTheme).colors,
      primary: theme.navigation.bg,
      accent: theme.navigation_selected.bg,
      text: theme.page_content.fg,
    }
  }
  return <PaperProvider theme={paperTheme}>
    <App />
  </PaperProvider>
}

export default function App() {
  return (
    <PaperProvider theme={DarkTheme}>
      <UserProvider>
        <UserContext.Consumer>
          {(value) => {
            return (
              <NavigationContainer
                linking={linking}
                fallback={<Text>Loading...</Text>}>
                <StatusBar
                  backgroundColor={DarkTheme.colors.background}
                  barStyle="light-content"
                />
                <MainAppStack />
              </NavigationContainer>
            );
          }}
        </UserContext.Consumer>
      </UserProvider>
    </PaperProvider>
  );
}

BottomSheet = ({isOpen, closeBottomSheet, options}) => {
  return (
    <Modal
      testID={'modal'}
      isVisible={isOpen}
      onSwipeComplete={closeBottomSheet}
      onBackButtonPress={closeBottomSheet}
      onBackdropPress={closeBottomSheet}
      swipeDirection={['down']}
      style={styles.view}>
      <View style={styles.content}>
        <Text style={styles.contentTitle}>What do you wanna do?</Text>
        {options.map((item) => {
          const {text, onPress} = item;
          return (
            <Button
              key={text}
              mode="text"
              labelStyle={styles.contentOptions}
              onPress={onPress}>
              {text}
            </Button>
          );
        })}
        <Button
          key="cancel"
          mode="text"
          color={DarkTheme.colors.error}
          labelStyle={styles.contentOptions}
          onPress={closeBottomSheet}>
          Cancel
        </Button>
      </View>
    </Modal>
  );
}

styles = StyleSheet.create({
  view: {
    justifyContent: 'flex-end',
    margin: 0,
  },
  content: {
    backgroundColor: DarkTheme.colors.background,
    padding: 22,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
    borderColor: 'rgba(0, 0, 0, 0.1)',
  },
  contentTitle: {
    ...Styles.fontLarge,
    marginBottom: 12,
    color: 'white',
  },
  contentOptions: {
    ...Styles.fontMedium,
    marginVertical: 8,
  },
})

CommentIcon = ({width = 24, height = 24}) => {
  return (
    <Svg width={width} height={height} viewBox="0 0 24 24" fill="none">
      <Path
        d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.379 8.379 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"
        stroke={DarkTheme.colors.primary}
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </Svg>
  );
}

render() {
    const {state} = this.context;
    return state.uid === '' ? (
      <Stack.Navigator
        initialRouteName="Starting"
        keyboardHandlingEnabled={true}
        headerMode="none">
        <Stack.Screen name="Starting" component={LandingScreen} />
      </Stack.Navigator>
    ) : (
      <Tab.Navigator
        initialRouteName="HomeScreen"
        backBehavior="initialRoute"
        labeled={false}
        shifting={false}
        barStyle={{backgroundColor: DarkTheme.colors.background}}
        lazy={false}>
        <Tab.Screen
          options={{
            tabBarIcon: ({focused}) => <AddPictureIcon focused={focused} />,
          }}
          name="Add"
          component={AddImageScreen}
        />
        <Tab.Screen
          options={{
            tabBarIcon: ({focused}) => <HomeIcon focused={focused} />,
          }}
          name="HomeScreen"
          component={PostViewStack}
        />
        <Tab.Screen
          options={{
            tabBarIcon: ({focused}) => <ProfileIcon focused={focused} />,
          }}
          name="Profile"
          component={PostViewProfileStack}
        />
      </Tab.Navigator>
    );
  }

render() {
    const {state} = this.context;
    const {enrolledBoxes, newBoxName, btnLoading} = this.state;
    return (
      <View style={styles.listCircleContainer}>
        <Text style={[Styles.fontSmall, styles.helpText]}>
          Boxes are your personal Friend/Family/Work groups where you share
          relevant posts which interest a perticular group. You can either join
          an existing group or create a new group.
        </Text>
        <View style={styles.addPartConatiner}>
          <Text style={Styles.fontSmall}>Create New Box</Text>
          <TextInput
            style={[Styles.fontMedium, styles.textInput]}
            mode="outlined"
            placeholder="Box Name"
            maxLength={30}
            dense={true}
            value={newBoxName}
            onChangeText={(nb) => this.setNewBoxName(nb)}
          />
          <Button
            labelStyle={Styles.fontSmall}
            loading={btnLoading}
            icon="plus"
            onPress={() => this.handleCreateBox()}>
            Create Box
          </Button>
        </View>
        <Divider />
        <FlatList
          ListHeaderComponent={() => {
            return <Text style={Styles.fontSmall}>Enrolled Boxes</Text>;
          }}
          ListHeaderComponentStyle={{margin: 10}}
          ListEmptyComponent={() => {
            return (
              <View style={styles.emptyComponentContainer}>
                <Planet
                  size={width / 2.5}
                  mood={newBoxName.length !== 0 ? 'lovestruck' : 'blissful'}
                  color="#FCCB7E"
                />
                <Headline style={[Styles.fontMedium, styles.noBoxesYet]}>
                  Here you create new Boxes and see what boxes you are enrolled
                  in. To switch boxes you just tap on them from the given list.
                  To get started create a New Box, don't forget to give it
                  exciting name.
                </Headline>
              </View>
            );
          }}
          data={enrolledBoxes}
          keyExtractor={(item) => item}
          renderItem={({item}) => {
            return (
              <Card
                onPress={() => this.handleSelectBox(item)}
                style={styles.card}>
                <Card.Content style={styles.cardContent}>
                  <Subheading styles={Styles.fontMedium}>{item}</Subheading>
                  {state.box === item ? (
                    <Icons
                      name="check"
                      size={20}
                      color={DarkTheme.colors.primary}
                    />
                  ) : null}
                </Card.Content>
              </Card>
            );
          }}
          ItemSeparatorComponent={() => <Divider style={styles.Divider} />}
        />
      </View>
    );
  }