How can I add space Inbetween text as in react native gap css is not working-CodePudding

Here I want space between test1 and test2.

import React from "react";
import { StyleSheet, View } from "react-native";

function App() {
  const data = ["test1", "test2", "test3"];

  return (
    <View style={styles.app}>
      {data.map((text) => (
        <span style={styles.span}>{text}</span>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  app: {
    marginTop: 30,
    position: "absolute",
    backgroundColor: "yellow",
    left: "8px",
    widht: "auto",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  },
  span: {
    gap: 20
  }
});

export default App;

But currently it look like this

CodePudding user response：

You need to add the gap property alongside display: flex inside the class app.

import React from "react";
import { StyleSheet, View } from "react-native";

function App() {
  const data = ["test1", "test2", "test3"];

  return (
    <View style={styles.app}>
      {data.map((text) => (
        <span>{text}</span>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  app: {
    marginTop: 30,
    position: "absolute",
    backgroundColor: "yellow",
    left: "8px",
    widht: "auto",
    flexDirection: "row",
    display: "flex",
    gap: 10,
    alignItems: "center",
    justifyContent: "space-between"
  }
});

export default App;

https://codesandbox.io/s/upbeat-chebyshev-22kuqd?file=/src/App.js:0-573