react native on wrapping inside View with 2 Text Elements

i have the code above and the text is not wrapping

const ProductScreen = props =>
{

  const [isAjaxLoading, setAjaxLoading] = useState(true);
  const [data, setData] = useState({});
  const [pricesView, setPricesView] = useState(false);

  const win = Dimensions.get('window');

    return (
        <SafeAreaView style={styles.screen}>
          <ScrollView style={styles.scrollView}>
            <View>

              <View style={styles.AvailabilityWrapper}>
                <Text>Availability : </Text>
                <Text style={styles.availability_10}>This product will be available again on December 24</Text>
              </View>

            </View>
          </ScrollView>
        </SafeAreaView>
    );

};



const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: 'center',
    flexDirection:'row',
    paddingVertical : 5,
    paddingHorizontal : 5
  },

  bold : {
    fontWeight: 'bold',
  },
  alertWarning : {
    color: '#856404',
    backgroundColor: '#fff3cd',
    paddingHorizontal: 5
  },


  AvailabilityWrapper : {
    flexDirection:'row',
    paddingVertical:10,
    borderBottomColor: '#ddd',
    borderBottomWidth: 1,
    flex:1,
    flexGrow: 1
  },
  horizontal : {
    flex:1,
    flexDirection:'row',
    alignItems: 'center'
  },
  horizontalVA : {
    flex:1,
    flexDirection:'row',
    alignItems: 'center'
  },
  availability_6 : {
    color: '#1fa35d',
  },
  availability_10 : {
    color: '#ff9300',
  },
  availability_0 : {
    color: 'red',
  }

});

export default ProductScreen;

The result on mobile is Availability :This product will be available again on December

The 24 is not showing at all

I have found some solution on stack overflow and i have try them but nothings seems to work for me.

I have try flexWrap, flexGrowth and also set with 30% for label and 70% for value but nothing is working.

When use only one Text in a View i have no problem with wrapping

Any help appreciated