How to fix commas being inbetween flex components in react native

Question

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"
  }
});

Thank you, I did not notice that they were there, It fixed the problem. — James Gaunt, Jul 18 '22 at 05:08

score 0 · Answer 1 · answered Jul 18 '22 at 05:08

0

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

answered Jul 18 '22 at 05:08

James Gaunt

119
1
14

This does not provide an answer to the question, this would be more appropriate as a comment. – cursorrux Jul 19 '22 at 05:46

score 0 · Accepted Answer · answered Jul 18 '22 at 05:20

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"
  }
});

Thank you, I accidentally left them there, and I thought I needed them for syntax. — James Gaunt, Jul 19 '22 at 01:37

How to fix commas being inbetween flex components in react native

2 Answers2