React Native Flex Wont Fill Width Equal

Question

I Created A Custom Component Which Just A Counter But There Is a Small Style Error. I Tried So Many Things But I Can't Find Any Solution. Can You Tell Me What's Wrong About And A Way To Fix?

Mistake

I Added 3 Touchable Opacity. They Have Flex: 1. When I Give Background Color To Parent Of This It's Changing All Area That Needs To Fill. What I Need To Do Is All Objects Background Must Be Equal.

import React, { Component } from "react";
import { StyleSheet, View, Text, ViewPropTypes} from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import PropTypes from "prop-types";

class Counter extends Component{
    constructor(props){
        super(props);

        this.style = StyleSheet.create({
            topContainer:{
                flex:1,
                width:"100%",
                flexDirection:"column",
                alignItems:"center",
                justifyContent:"center"
            },
            topPanel:{
                flex:1,
                flexDirection:"row",
                alignItems:"center",
                justifyContent:"center",
                width:"100%",
            },
            bottomPane:{
                flex:1,
                flexDirection:"row",
                width:"100%",
                alignItems:"center",
                justifyContent:"center",
            },
            buttonStyle:{
                flex:1,
                alignItems:"center",
                justifyContent:"center",  
            },
    });
}

static propTypes  = {
    backgroundStyle : ViewPropTypes.style,
    textStyle: Text.propTypes.style,
    buttonBackground: ViewPropTypes.style,
    returnFunc: PropTypes.func,
};

/*
this.props = 
{"buttonBackground":{"backgroundColor":"#cc99ff","borderRadius":20,"margin":4},
"backgroundStyle":{"backgroundColor":"#cc99ff","borderRadius":20,"margin":4},
"textStyle":{"fontSize":25.919999999999995,"textAlign":"center","color":"#ffffff"}}
*/

render(){
    console.log("Counter:56 " , JSON.stringify(this.props));
    return(
        <View style = {this.style.topContainer}>
            <View style={[this.style.topPanel,this.props.backgroundStyle]}>
                <Text style={this.props.textStyle}>2</Text>
            </View>

            <View style={this.style.bottomPane}>
                <TouchableOpacity style={[this.style.buttonStyle,this.props.buttonBackground]}> 
                    <Text style={this.props.textStyle}>Increment</Text> 
                </TouchableOpacity>

                <TouchableOpacity style={[this.style.buttonStyle,this.props.buttonBackground]}> 
                    <Text style={this.props.textStyle}>Decrement</Text> 
                </TouchableOpacity>

                <TouchableOpacity style={[this.style.buttonStyle,this.props.buttonBackground]}>
                    <Text style={this.props.textStyle}>Save</Text>
                </TouchableOpacity>
            </View>

        </View>
    );
}
}
export default Counter;

This Is All Code For This Component. All Style Has Flex. I Don't Know Why It's Doing It.

Thanks For All Helping.

Answer 1

It seems like the problem is with TouchableOpacity from react-native-gesture-handler.

Try the TouchableOpacity from react-native

import { StyleSheet, View, Text, ViewPropTypes, TouchableOpacity } from "react-native";