Search code examples
typescriptreact-nativereact-native-paper

React Native Paper the List.Accordion I can put the Icon


Objective

I am using the library react-native-paper and I am using the List components, but in the List.Accordion appears one strange image at the right position, I would like to put an icon arrow down in the place. But the List.Accordion just receive the left prop and no the right prop.

{bleDevices.length > 0 && (
          <List.Section>
            <List.Accordion
              title="Dispositivos encontrados"
              left={props => <Icon name="arrow-down" size={24} />}
            >
              {_.map(bleDevices, (device, index) => (
                <List.Item
                  key={index}
                  title={`${device.name || 'device'} (${device.rssi}) `}
                  description={`${device.localName} (${device.id})`}
                  right={props => (
                    <Button onPress={toggleConnectDevice(device.name)}>
                      Conectar
                    </Button>
                  )}
                />
              ))}
            </List.Accordion>
          </List.Section>
        )}

Image

enter image description here


Solution

  • Looks like you are missing the icon font. Normally if you havent installed react-native-vector-icons correctly you see that "strange image".