oblador / react-native-collapsible

Animated collapsible component for React Native, good for accordions, toggles etc
MIT License
2.44k stars 451 forks source link

renderContent error in Accordion #412

Open gugagranato opened 3 years ago

gugagranato commented 3 years ago

How I solve this in Accordion?

Look:

image

my renderContent function:

const renderContent = (section: TMonths) => {
    if (section.faturas.length > 0) {
      return section.faturas.map((fat: IFaturas) => (
        <View
          key={fat.id}
          style={{
            marginBottom: 6,
            marginTop: 6,
            width: '100%',
            flexDirection: 'row',
            justifyContent: 'space-between',
            paddingLeft: 8,
            paddingRight: 8,
            alignItems: 'center'
          }}
        >
          <View
            style={{
              backgroundColor:
                fat.pago === '1'
                  ? colors.$greenFinance
                  : isExpired(fat.vencimento)
                  ? colors.$redFinance
                  : colors.$yellowFinance,
              padding: 4,
              borderRadius: 4
            }}
          >
            <Text
              style={{
                fontSize: 12,
                color: colors.$background,
                fontWeight: '500'
              }}
            >
              {fnStatus(fat)}
            </Text>
          </View>

          <TouchableOpacity
            onPress={() =>
              navigation.navigate('FinancesItems', {
                id: fat.id
              })
            }
            style={{ justifyContent: 'space-between', alignItems: 'center' }}
          >
            <MaterialIcons
              name="more-horiz"
              size={40}
              color={colors.$primaryDark}
            />
            <Text style={{ marginTop: 4, fontSize: 12, fontWeight: '400' }}>
              Ver mais
            </Text>
          </TouchableOpacity>
        </View>
      ))
    } else {
      return (
        <View style={{ marginBottom: 6, marginTop: 6 }}>
          <Text>Não existem faturas para esse mês</Text>
        </View>
      )
    }
  }

My types:

image

Thanks.