Styling not applied on React Native components

Question

I'm creating my first app in React Native. Functionally my app does what it should do, it shows some lines of texts, one of which changes when pressing on it. The problem is that the styling won't apply - I receive no errors and I imported the StyleSheet. I applied my styling in the render method;

//Header.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isLoggedIn: false};
    }
    toggleUser = ()=>{
        this.setState(previousState => {
            return { isLoggedIn: !previousState.isLoggedIn }
        });
    }

    render() {
        let display = this.state.isLoggedIn ? 'Sample User' : this.props.message ;
        return (
            <View style={styles.headStyle}>
                <Text 
                    style={styles.headText}
                    onPress={this.toggleUser}>{display}
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    headText: {
        textAlign: 'right',
        color: '#ffffff',
        fontSize: 20
    },
    headStyle: {
        paddingTop: 30,
        paddingBottom: 10,
        paddingRight: 10,
        backgroundColor: '#35605a'
    }
});

Then, I import Header.js in Home.js, as shown below:

//Home.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Header } from '../Sections/Header.js';

export class Home extends React.Component {
    render() {
        return (
            <View>
                <Text>This is the homepage</Text>
                <Text>I've made several lines</Text>
                <Text>This is text shown in the app</Text>
                <Header message = 'Press to login' />
            </View>
        );
    }
}

finally I show the Home class in App.js, as shown here;

//App.js

import React from 'react';
import { Home } from './App/Views/Home.js';

export default class App extends React.Component {
  render() {
    return (
      <Home />
    );
  }
}

I'm stuck here and have no clue where the mistake could be at, if there is any additional information needed please let me know, I'm happy to supply it.

Answer 1

try like this import { TouchableOpacity } from 'react-native'

 <TouchableOpacity style={styles.headStyle} onPress={this.toggleUser}> <Text style={styles.headText} </Text> </TouchableOpacity>