react native - Getting Unexpected Design After using TouchableOpacity

Question

am implementing flatlist in my app, and by using TouchableOpacity am getting Unexpected Design, here is my code

    <FlatList
      data={dummyData}
      keyExtractor={(item) => item.id}
      numColumns={2}
      renderItem={(item) => (
        <TouchableOpacity style={style.grid} onPress={() => console.log("ds")}>
          <View>
            <Text>{item.item.title}</Text>
          </View>
        </TouchableOpacity>
      )}
    ></FlatList>
  );
};

const style = StyleSheet.create({
  grid: {
    flex: 1,
    height: 150,
    margin: 20,
    alignItems: "center",
    backgroundColor: "white",
    borderRadius: 10,
    elevation: 10,
  },
});

before adding TouchableOpacity am getting this

after adding TouchableOpacity am getting this

how can i solve this issue basically i want same result as in first picture but using TouchableOpacity. (Sorry for my bad english)

question from:https://stackoverflow.com/questions/65863257/getting-unexpected-design-after-using-touchableopacity

Answer 1

Waitting for answers