This series intends to show how I build app to serve content from my WordPress blog by using react native. Since, my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme , offline mode, infinite scroll and many more. You can discover much more in this series.this inspiration to do this tutorial series came from the from instamobile React Native App Templates Here, the components from the do not change the theme automatically. So, we need to fix them as well. For that, we are going to provide the higher-order component named from the package and pass the screens into it. react-native-render-html withTheme react-native-paper First, we need to make imports to the file as shown in the code snippet below: Home.js {Headline,Card, withTheme} ; import from 'react-native-paper' Then, while exporting the Home screen Home component, we need to wrap it with the module fro the package as shown in the code snippet below: withTheme react-native-paper withTheme(Home); export default Now, we will be able to access the theme variable in the screen props a shown in the code snippet below: render() { {colors} = .props.theme; ( const this return Next, we need to pass the color code to the prop of the component as shown in the code snippet below: tagStyles HTMLRender <HTMLRender
      html={item.excerpt.rendered}
      tagsStyles={{ : { : colors}}}
    /> p color This process is required in other screens as well. So instead of repeating the same process again and again, we are going to implement the new component which can be shared in all the screens. Implementing Card component Here, we are going to implement the card component which represents the list of cards that displays the articles in the Home, Categorie and Bookmark screens. For that, we need to create a new file called in the folder. Then, we need to use the code from the following cdode snippet into the file: Cards.js ‘./src/components/’ Cards.js React, {Component, useContext} ; {View, StyleSheet, TouchableOpacity} ; {Avatar, Button, Card, Title, Paragraph} ; HTMLRender ; moment ; ({item, navigation, textColor}) => { ( <Card
            style={[
              {
                shadowOffset: {width: 5, height: 5},
                width: '90%',
                borderRadius: 12,
                alignSelf: 'center',
                marginBottom: 10,
              },
            ]}>
            <Card.Content>
              <Title>{item.title.rendered}</Title>
              <Paragraph>Published on {moment(item.date).fromNow()}</Paragraph>
            </Card.Content>
            <Card.Cover source={{uri: item.jetpack_featured_media_url}} />
            <Card.Content>
              <Card.Content>
                <HTMLRender
                  html={item.excerpt.rendered}
                  tagsStyles={{p: {color: textColor}}}
                />
              </Card.Content>
            </Card.Content>
          </Card>
        </TouchableOpacity>
      );
    }; import from 'react' import from 'react-native' import from 'react-native-paper' import from 'react-native-render-html' import from 'moment' export default return navigation.navigate('SinglePost', {
              post_id: item.id,
            })
          }> < = => TouchableOpacity onPress {() Here, we have imported and implemented every component necessary to display the card interface in the screens. The steps we have undertaken are provided below: First, we receive the required prop parameters from the parent screens or components Second, we implement the UI of Card component as same that was previously shown in the Home and other screens We also configure the navigation from the react-navigation event passed down as prop We configure the from theme variable passed down as prop textColor Now, we need to import the file back to the file and use it to display the card templates in the Home screen. For that, we need to use the code from the following code snippet: Card.js Home.js <FlatList
              data={ .state.lastestpost}
              onRefresh={() => .onRefresh()}
              refreshing={ .state.isFetching}
              onEndReached={ .handleLoadMore}
              onEndReachedThreshold={ }
              ListFooterComponent={ .renderFooter}
              renderItem={({item}) => ( this this this this 0.1 this )}
              keyExtractor={item => item.id}
            /> < = = = /> Card item {item} navigation {this.props.navigation} textColor {colors.text} Here, we have imported the file as a component and used it inside the component. The component is set with all the necessary props to pass down to . Card.js Card FlatList Card Card.js Hence, we will get the following result in the emulator screens: Summary In this chapter, we learned how to use the component from the react-native-paper package in order to change our UI theme made using the components from this package to dark. DarkTheme

How To Build WordPress App with React Native Part #18: Changing Theme Functionality

How To Build WordPress App with React Native Part #16: Adding Dark Mode

visit more my tutorial

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How To Build WordPress App with React Native Part #17: Fixing react-native-render-html

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Best React Native Chart Libraries

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

10 Best React Native Chart Libraries

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps