react-native-elements#Card TypeScript Examples

The following examples show how to use react-native-elements#Card. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ProductItem.component.tsx    From RNWCShop with GNU General Public License v3.0 6 votes vote down vote up 
ProductItem = (props: Props): JSX.Element => {
  const {
    product: {
      id,
      name,
      images: [image],
      price
    },
    handleProductPress,
    isInCart = false
  } = props;

  return (
    <TouchableOpacity onPress={(): void => handleProductPress(id)}>
      <Card
        title={name}
        // @ts-ignore
        titleNumberOfLines={2}
        image={{ uri: image.src }}
        containerStyle={styles.card}>
        <Text>{toAmount(price)}</Text>
        {isInCart ? _renderCartDetail(props) : _renderBrowseDetail(props)}
      </Card>
    </TouchableOpacity>
  );
}
Example #2
Source File: ProductItem.component.tsx    From react-native-woocommerce with MIT License 6 votes vote down vote up 
ProductItem = (props: Props): JSX.Element => {
  const {
    product: {
      id,
      name,
      images: [image],
      price
    },
    handleProductPress,
    isInCart = false
  } = props;


  return (
    <TouchableOpacity onPress={(): void => handleProductPress(id)}>
      <Card
        title={name}
        // @ts-ignore
        titleNumberOfLines={2}
        image={{ uri: image.src }}
        containerStyle={{ width: screenWidth / 2 - 20, margin: 10 }}
      >
        <Text>{toAmount(price)}</Text>
        {isInCart ?
            _renderCartDetail(props) :
            _renderBrowseDetail(props)
        }
      </Card>
    </TouchableOpacity>
  );
}
Example #3
Source File: Consultation.tsx    From wuhan2020-frontend-react-native-app with MIT License 6 votes vote down vote up 
function Consultation({ item }: PropTypes) {
  const [visible, setVisible] = useState(false);

  return (
    <Card title={`${item.name}`}>
      <View style={styles.subtitleContainer}>
        <Text style={styles.subtitle}>发布于{moment(item.date).fromNow()}</Text>
      </View>
      <ContactList data={item.contacts} />
      <View>
        <H3 title="内容" />
        <Text style={{ marginVertical: 5 }}>{item.remark}</Text>
      </View>

      <View style={{ paddingHorizontal: 30, paddingTop: 10 }}>
        <Button
          type="outline"
          title="查看详情"
          onPress={() => setVisible(true)}
        />
        <WebViewModal
          uri={item.url}
          title={`${item.name}`}
          visible={visible}
          onClose={() => setVisible(false)}
        />
      </View>
    </Card>
  );
}
Example #4
Source File: Hotel.tsx    From wuhan2020-frontend-react-native-app with MIT License 6 votes vote down vote up 
function Hotel({ item }: PropTypes) {
  const [visible, setVisible] = useState(false);
  const title = `${item.name} (${item.city})`;

  return (
    <Card title={title}>
      <View style={{ paddingHorizontal: 30, paddingTop: 10 }}>
        <View style={styles.subtitleContainer}>
          <Text style={[styles.subtitle, { fontSize: 14 }]}>{item.city}</Text>
          <Text style={styles.subtitle}>
            发布于{moment(item.date).fromNow()}
          </Text>
        </View>
        <ContactList data={item.contacts} />
        <Address {...item} />
        <Button
          type="outline"
          title="查看详情"
          onPress={() => setVisible(true)}
        />
        <WebViewModal
          uri={item.url}
          title={`${item.name}`}
          visible={visible}
          onClose={() => setVisible(false)}
        />
      </View>
    </Card>
  );
}
Example #5
Source File: Logistic.tsx    From wuhan2020-frontend-react-native-app with MIT License 6 votes vote down vote up 
function Logistic({ item }: PropTypes) {
  const [visible, setVisible] = useState(false);

  const title = `${item.name} - (${item.from} - ${item.dest})`;
  return (
    <Card title={title}>
      <View style={styles.subtitleContainer}>
        <Text style={styles.subtitle}>发布于{moment(item.date).fromNow()}</Text>
      </View>
      <ContactList data={item.contacts} />
      <Remark remark={item.remark} />

      <View>
        <H3 title="可否载人" />
        <Text style={{ marginVertical: 5 }}>
          {item.allowPersonal ? '是' : '否'}
        </Text>
      </View>
      <View style={{ paddingHorizontal: 30, paddingTop: 10 }}>
        <Button
          type="outline"
          title="查看详情"
          onPress={() => setVisible(true)}
        />
        <WebViewModal
          uri={item.url}
          title={title}
          visible={visible}
          onClose={() => setVisible(false)}
        />
      </View>
    </Card>
  );
}
Example #6
Source File: Donation.tsx    From wuhan2020-frontend-react-native-app with MIT License 5 votes vote down vote up 
function Donation({ item }: PropTypes) {
  return (
    <Card title={`${item.name} （${item.status}）`}>
      <ContactList data={item.contacts} />
      <View>
        <H3 title="联系方式" />
        <View>
          {[
            { title: '地址', key: 'address' },
            { key: 'email', title: '邮箱' },
            { key: 'wechat', title: '微信' },
          ].map(({ title, key }) => (
            <Item key={key} left={title} right={item[key] || '无'} />
          ))}
        </View>
      </View>
      <View>
        <H3 title="银行信息" />
        <View>
          {item.bankAccounts.map(
            (bank: { name: string; bank: string; number: string }) => (
              <View
                style={{
                  paddingVertical: 5,
                }}>
                <Item left="名称" right={bank.name} />
                <Item left="银行" right={bank.bank} />
                <Item left="账号" right={bank.number} />
              </View>
            ),
          )}
        </View>
      </View>
      <Remark remark={item.remark} />

      <View style={{ paddingHorizontal: 30, paddingTop: 10 }}>
        <Button
          type="outline"
          title="查看详情"
          onPress={() => Linking.openURL(item.url)}
        />
      </View>
    </Card>
  );
}
Example #7
Source File: Hospital.tsx    From wuhan2020-frontend-react-native-app with MIT License 5 votes vote down vote up 
function Hospital({ item }: PropTypes) {
  const { supplies } = item;
  const [visible, setVisible] = useState(false);
  return (
    <Card title={item.name}>
      <View style={styles.subtitleContainer}>
        <Text style={[styles.subtitle, { fontSize: 14 }]}>
          {item.city} - {item.province || ''}
        </Text>
        <Text style={styles.subtitle}>{item.district}</Text>
      </View>
      <View style={styles.supplyContainer}>
        <View>
          {supplies.slice(0, 3).map(supply => (
            <Supply item={supply} />
          ))}
          {supplies.length - 3 > 0 ? (
            <Text style={styles.supplyInfo}>
              +{supplies.length - 3}项其他物资
            </Text>
          ) : null}
        </View>
      </View>
      <View style={{ paddingHorizontal: 30, paddingTop: 10 }}>
        <Button
          type="outline"
          title="查看详情"
          onPress={() => setVisible(true)}
        />
        <Modal
          animationType="fade"
          presentationStyle="formSheet"
          transparent={false}
          onDismiss={() => {
            setVisible(false);
          }}
          onRequestClose={() => {
            setVisible(false);
          }}
          visible={visible}>
          <View style={{ padding: 16, justifyContent: 'space-between' }}>
            <View style={{ height: height - 150 }}>
              <HospitalDetail item={item} />
            </View>
            <View>
              <Button
                title="关闭详情"
                onPress={() => {
                  setVisible(false);
                }}
              />
            </View>
          </View>
        </Modal>
      </View>
    </Card>
  );
}