How to fix commas being inbetween flex components in react native-CodePudding

I am new to react native, and so I am sure there is some very obvious fix to this, but between my flex views in react native, there is a tiny comma there for some reason. It is not very obvious, but still noticeable. I was wondering

At normal zoom, it is only barely noticeable: Screenshot of my react native app in chrome at 100% zoom

But at 500% zoom, it is very obvious: Screenshot of my react native app in chrome at 500% zoom

And here is my index.js file:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, SafeAreaView, Button, View, Image, TouchableOpacity} from 'react-native';

export default function App() {
  console.log("App executed!");

  const handleTextPress = () =>console.log("Text Clicked!.com")

  return (
    <SafeAreaView style={{ height: '100%'}}>
      <View style={{
        height: '20%', width: "100%", flexDirection: "row"
      }}>
        <TouchableOpacity style={{flex: 1}}>
          <View style={{
            backgroundColor: "dodgerblue",
            height: "100%"
          }}/>
        </TouchableOpacity>,
        <TouchableOpacity style={{flex: 0.1}}>
          <View style={{
            backgroundColor: "black",
            height: "100%"
          }}/>
        </TouchableOpacity>,
        <TouchableOpacity style={{flex: 1}}>
          <View style={{
            backgroundColor: "black",
            height: "100%"
          }}/>
        </TouchableOpacity>
      </View>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  toptext: {
    color: "black"
  }
});

CodePudding user response：

My question has been answered, thank you for all your help.

CodePudding user response：

Try this. You've added , after your TouchableOpacity

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, SafeAreaView, Button, View, Image, TouchableOpacity} from 'react-native';

export default function App() {
  console.log("App executed!");

  const handleTextPress = () =>console.log("Text Clicked!.com")

  return (
    <SafeAreaView style={{ height: '100%'}}>
      <View style={{
        height: '20%', width: "100%", flexDirection: "row"
      }}>
        <TouchableOpacity style={{flex: 1}}>
          <View style={{
            backgroundColor: "dodgerblue",
            height: "100%"
          }}/>
        </TouchableOpacity>
        <TouchableOpacity style={{flex: 0.1}}>
          <View style={{
            backgroundColor: "black",
            height: "100%"
          }}/>
        </TouchableOpacity>
        <TouchableOpacity style={{flex: 1}}>
          <View style={{
            backgroundColor: "black",
            height: "100%"
          }}/>
        </TouchableOpacity>
      </View>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  toptext: {
    color: "black"
  }
});