How to use react-native-paper - 10 common examples

// Setup global dark theme
      global.DARK = {
        colors: {
          ...DarkTheme.colors,
          surface: 'black',
          text: GREY[50],
          primary: tint[500],
          accent: tint[300],
        }
      };

      // Setup global light theme
      global.LIGHT = {
        colors: {
          ...DefaultTheme.colors,
          surface: 'white',
          text: GREY[900],
          primary: tint[500],
          accent: tint[300],
        }
      };

      props.theme.roundness = 32;
      props.theme.dark = DARKMODE;
      props.theme.colors = DARKMODE ? DARK.colors : LIGHT.colors;
      console.log(props.theme);

      let first = getFirstLaunch();
      if (!first) {
        // Update data here if it is not first launch
        let dn = new Downloader(getCurrServer());

if (hour >= 19 || hour < 7) {
        DARKMODE = true;
      }

      let userLang = DATA[LOCAL.userLanguage];
      if (userLang !== '') lang.setLanguage(userLang);

      console.log('state has been set');

      let tint = TintColour();
      if (!tint[50]) tint = BLUE;

      // Setup global dark theme
      global.DARK = {
        colors: {
          ...DarkTheme.colors,
          surface: 'black',
          text: GREY[50],
          primary: tint[500],
          accent: tint[300],
        }
      };

      // Setup global light theme
      global.LIGHT = {
        colors: {
          ...DefaultTheme.colors,
          surface: 'white',
          text: GREY[900],
          primary: tint[500],
          accent: tint[300],
        }

item}
          renderItem={this.renderItem}
          ItemSeparatorComponent={Separator}
          keyboardShouldPersistTaps="always"
          removeClippedSubviews={false} // to prevent flatlist hidden after switch language
          onScroll={Keyboard.dismiss}
        />
      
    );
  }
}

export default withTheme(connectLocalization(SearchHistory));

updateTheme() {
    const { tintColour } = this.state;
    // Switch mode
    UpdateDarkMode();
    this.setState({darkMode: DARKMODE});
    this.props.theme.dark = DARKMODE;
    if (DARKMODE) {
      global.DARK = {
        colors: {
          ...DarkTheme.colors,
          surface: 'black',
          text: GREY[50],
          primary: tintColour[500],
          accent: tintColour[300],
        }
      };
      this.props.theme.colors = DARK.colors;
    } else {
      // Setup global light theme
      global.LIGHT = {
        colors: {
          ...DefaultTheme.colors,
          surface: 'white',
          text: GREY[900],
          primary: tintColour[500],
          accent: tintColour[300],

updateTheme() {
    const { tintColour } = this.state;
    // Switch mode
    UpdateDarkMode();
    this.setState({darkMode: DARKMODE});
    this.props.theme.dark = DARKMODE;
    if (DARKMODE) {
      global.DARK = {
        colors: {
          ...DarkTheme.colors,
          surface: 'black',
          text: GREY[50],
          primary: tintColour[500],
          accent: tintColour[300],
        }
      };
      this.props.theme.colors = DARK.colors;
    } else {
      // Setup global light theme
      global.LIGHT = {
        colors: {
          ...DefaultTheme.colors,
          surface: 'white',
          text: GREY[900],
          primary: tintColour[500],
          accent: tintColour[300],

render() {
    const placeholder = {
      height: this.props.size,
      width: this.props.size,
      backgroundColor: Colors.blue500
    };

    // White logo
    if (this.props.white) {
      return

constructor(props: AllProps) {
    super(props);

    this.state = {
      // Theme and updateTheme from anywhere
      theme: new UserTheme(false, Colors.blue500),
      updateTheme: (newTheme) => {
        this.setState({
          theme: newTheme
        });
      },
      // update app language
      language: languageAvailable.en,
      updateLanguage: (newLang) => {
        langs.setLanguage(newLang);
      }
    }

    // set the default language
    langs.setLanguage(this.state.language);
  }

this.state = {
      index: 0,
      routes: [
        { key: 'wiki', title: langs.home_tab_wiki!, icon: 'book' },
        { key: 'website', title: langs.home_tab_website!, icon: 'web' },
        { key: 'search', title: langs.home_tab_search!, icon: 'magnify' },
        { key: 'rs', title: langs.home_tab_rs!, icon: 'poll' },
        { key: 'main', title: langs.home_tab_main!, icon: 'account' },
      ],
      loading: true,
      error: ''
    };
  }

  renderScene = BottomNavigation.SceneMap({
    wiki: () => ,
    website: () => ,
    search: () => ,
    rs: () => ,
    main: () => ,
  });

  handleIndexChange = (index: number) => this.setState({ index });

  render() {
    const { rootView } = styles;
    // TODO: render a bottom navigation
    return (

render() {
    return (
       this.setState({ index })}
        // @ts-ignore
        renderScene={BottomNavigation.SceneMap({
          album: PhotoGallery,
          library: PhotoGallery,
          favorites: PhotoGallery,
          purchased: PhotoGallery,
        })}
      />
    );
  }
}

render() {
    return (
       this.setState({ index })}
        // @ts-ignore
        renderScene={BottomNavigation.SceneMap({
          album: PhotoGallery,
          library: PhotoGallery,
          favorites: PhotoGallery,
          purchased: PhotoGallery,
        })}
      />
    );
  }
}