How to display two arrays in one component?

Issue

I have two different arrays:

 array1: [
  {
   name: John,
   city:  Rome
  },

  {
   name: Sara,
   city: Paris
  }
]

 array2: [
  {
   fruit: "Peaches" ,
   drink: "milk"
  },
  {
   fruit: "Banana" ,
   drink: "Water"
  }
]

and I want to display them in one view.

By far I have done something like this:

<ScrollView>
        {array1.length > 0 ? (
              array1?.map((newList, index) => (
                  <View key={index}>
                        <Text>{newList.name}</Text>
                  </View>
                ))
              ) : array2.length > 0 ? (
                array2.map((newList2, index) => (
                  <View key={index}>
                        <Text>{newList2.fruit}</Text>
                  </View>
                ))
              ) : (
                <View>
                    <Text>No data</Text>
                </View>
              )}
  </ScrollView>

Its not shown any syntax error but the problem is that its shown only the content of the array1 in the ScrollView.

How can I show both arrays in the same ScrollView ?

Solution

<ScrollView>

        {array1.length > 0 && (
              array1?.map((newList, index) => (
                  <View key={index}>
                        <Text>{newList.name}</Text>
                  </View>
                ))
        )}

        {array2.length > 0 && (
           array2.map((newList2, index) => (
             <View key={index}>
                   <Text>{newList2.fruit}</Text>
             </View>
           ))
         )}

         {array1.length === 0 && array2.length === 0 && (
           <View>
               <Text>No data</Text>
           </View>
         )}

  </ScrollView>

Answered By - Haim Abeles