How to create Picker dropdown inline with Text in the React Native?

28 Views Asked by At

I'm looking for format Picker inline with many setences in paragraph. I want to format it with the result as

enter image description here

My code is format as bellow

<View
          key={paragraphIndex}
          style={{flexDirection: 'row', textAlign: 'left'}}>
          <Text
            style={{
              fontSize: 18,
              color: 'black',
              textAlign: 'left',
            }}>
            {paragraph.text}
          </Text>

          <Picker
            style={{width: 30, textAlign: 'right'}}
            itemStyle={{
              fontSize: 15,

              color: 'black',
              textAlign: 'center',
              fontWeight: 'bold',
            }}
            mode="dropdown"
            key={paragraphIndex}
            selectedValue={selectedValues[paragraphIndex]}
            onValueChange={itemValue =>
              handleDropdownChange(paragraphIndex, itemValue)
            }>
            {paragraph.dropdownData.map((item, index) => (
              <Picker.Item
                key={index}
                label={item.label}
                value={item.value}
                style={{height: 10}}
              />
            ))}
          </Picker>
        </View>

Everyone can help me to format it the same my result. Thanks!

0

There are 0 best solutions below