native-base#Thumbnail JavaScript Examples

The following examples show how to use native-base#Thumbnail. 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: index.js    From aws-appsync-refarch-offline with MIT No Attribution 5 votes vote down vote up 
function Catalog(props) {

    const [loading, setLoading] = useState(false);
    const [products, setProducts] = useState([]);
    const order = useSelector(state => state.order);
    const dispatch = useDispatch();

    useEffect(() => {
        fetchProducts();
    }, []);

    async function fetchProducts() {
        const data = await DataStore.query(Product);
        setProducts(data);
    };

    function checkoutBtnHandler() {
        return props.navigation.push('Checkout');
    }

    function addProductHandler(product) {
        dispatch(addLineItem(product));
    }
    
    const productList = products.map(product => (
        <ListItem thumbnail key={product.id}>
            <Left>
                <Thumbnail square source={{ uri: product.image }} />
            </Left>
            <Body>
                <Text>{product.name}</Text>
                <Text note numberOfLines={1}>${product.price}</Text>
            </Body>
            <Right>
                <Button onPress={() => addProductHandler(product)}>
                    <Text>Add</Text>
                </Button>
            </Right>
        </ListItem>
    ));

    return (
        <Container>
            <Content refreshControl={
                <RefreshControl
                    onRefresh={fetchProducts}
                    refreshing={loading}
                />
            }>
                <Button block info style={styles.checkoutBtn} onPress={checkoutBtnHandler}>
                    <Text style={styles.quantityText}>{order.totalQty}</Text>
                    <Text style={styles.subtotalTxt}>Subtotal ${order.subtotal.toFixed(2)}</Text>
                </Button>
                <List>
                    {productList}
                </List>
            </Content>
        </Container>
    );
}
Example #2
Source File: StoryImage.js    From WhatsApp-Clone with MIT License 5 votes vote down vote up 
StoryImage = ({source, hideBorder}) => {
  return (
    <View style={hideBorder ? styles.viewedImageStyle : styles.imageStyle}>
      <Thumbnail source={source} />
    </View>
  );
}
Example #3
Source File: CallsViewItem.js    From WhatsApp-Clone with MIT License 5 votes vote down vote up 
CallsViewItem = ({item, hideBorder = true}) => {
  return (
    <View transparent style={{elevation: 0, marginRight: -5}}>
      <CardItem>
        <View style={{marginLeft: -5}}>
          <Thumbnail source={item.profile} />
          {/* <StoryImage hideBorder={hideBorder} source={item.profile} /> */}
        </View>
        <Body
          style={{
            flexDirection: 'column',
            width: 800,
            marginLeft: 15,
          }}>
          <Text
            numberOfLines={1}
            style={[DEFAULT_STYLES.poppinsSemiBold, styles.userName]}>
            {item.name}
          </Text>
          <View style={{flexDirection: 'row'}}>
            <Icon
              style={{
                fontSize: 20,
                marginTop: 3,
                color: item.isMissed ? RED : LIGHT_GREEN,
                marginRight: 5,
              }}
              type="MaterialCommunityIcons"
              name={item.msgIcon}
            />
            <Text
              numberOfLines={2}
              style={[DEFAULT_STYLES.poppinsLight, styles.userMessage]}>
              {item.time}
            </Text>
          </View>
        </Body>
        <View>
          {/* <Text style={(DEFAULT_STYLES.poppinsSemiBold, styles.userTime)}>
            {item.time}
          </Text> */}
          <Icon
            style={styles.msgIcon}
            name={item.callTypeIcon}
            type="MaterialIcons"
          />
        </View>
      </CardItem>
    </View>
  );
}
Example #4
Source File: ChatListItem.js    From WhatsApp-Clone with MIT License 5 votes vote down vote up 
ChatListItem = ({item, navigation, userId}) => {
  const [userType, setUserType] = useState('');

  let data = item.chat[0];

  useEffect(() => {
    setUserName();
  }, []);

  async function setUserName() {
    let userType = await getUserType(item);
    setUserType(userType);
  }

  return (
    <TouchableOpacity
      onPress={() => {
        navigation &&
          navigation.navigate(NAV_TYPES.CHAT_MESSAGE_SCREEN, {
            item: item,
            isNewChat: false,
          });
      }}>
      <Card transparent style={{elevation: 0, marginRight: -5}}>
        <CardItem>
          <View style={{marginLeft: -5}}>
            <Thumbnail
              source={
                data.chatImage === ''
                  ? PROFILE
                  : {isStatic: true, uri: data.chatImage}
              }
            />
          </View>
          <Body
            style={{
              flexDirection: 'column',
              marginLeft: 15,
            }}>
            <Text
              numberOfLines={1}
              style={[DEFAULT_STYLES.poppinsSemiBold, styles.userName]}>
              {userType == constants.FRIEND ? data.userName : data.chatName}
            </Text>

            <Text
              numberOfLines={2}
              style={[DEFAULT_STYLES.poppinsLight, styles.userMessage]}>
              {data.chatMessage}
            </Text>
          </Body>
          <View>
            <Text style={[DEFAULT_STYLES.poppinsSemiBold, styles.userTime]}>
              {getTimeInFormat(data.chatTime)}
            </Text>
            {item.chatUnreadCount != 0 && (
              <View style={styles.textMsgCountView}>
                <Text
                  style={styles.textMsgCount}>
                  {item.chatUnreadCount}
                </Text>
              </View>
            )}
            {item.chatUnreadCount === 0 && (
              <Icon
                style={styles.msgIcon}
                name={data.chatUnreadCount}
                type={data.chatUnreadCount}
              />
            )}
          </View>
        </CardItem>
      </Card>
    </TouchableOpacity>
  );
}
Example #5
Source File: ChatRoomHeaderView.js    From WhatsApp-Clone with MIT License 4 votes vote down vote up 
ChatRoomHeaderView = ({item, navigation, isNewChat}) => {
  // console.log('isNewChat =>', isNewChat);
  const [userType, setUserType] = useState('');
  const [displayLastSeen, setDisplayLastSeen] = useState('');
  const [apiLastSeen, setApiLastSeen] = useState('');

  let data = item.chat[0];

  useEffect(() => {
    populateUserType();
    getUserLastSeen();
    listenUserLastSeen();
  }, []);

  useEffect(() => {
    if (apiLastSeen != '') {
      calcLastSeen(apiLastSeen);
    }
  }, [apiLastSeen]);

  const populateUserType = async () => {
    let userType = await getUserType(item);
    setUserType(userType);
  };

  async function getUserLastSeen() {
    let userId = await getLocalData(constants.USER_ID);
    // This to get id of the other user
    let id = data.userId === userId ? data.chatId : data.userId;
    let request = {id: id};
    let res = getLastSeenUser(request);
    res
      .then(lastSeen => {
        if (lastSeen) {
          // console.log('User Last Seen ==> ', JSON.stringify(lastSeen));
          setApiLastSeen(lastSeen.data.lastSeen[0]);
        }
      })
      .catch(err => {
        console.log('User Last Seen ==> ', err);
      });
  }

  function listenUserLastSeen() {
    socket.on(constants.LAST_SEEN, async status => {
      // console.log('App Status == ', status);
      let newStatus = {
        userId: status.userId,
        userName: status.userName,
        status: status.status,
        lastSeen: status.lastSeen,
      };
      let id = await getLocalData(webConstants.USER_ID);
      if (status.userId != id) {
        calcLastSeen(newStatus);
      } else {
        // setDisplayLastSeen("");
      }
    });
    sendPageLoadStatus();
  }

  async function calcLastSeen(lastSeen) {
    if (lastSeen) {
      if (lastSeen.userId === data.userId || lastSeen.userId === data.chatId) { 
          let time =
            lastSeen.status === 'Offline'
              ? `Last seen at ${getDateTimeInFormat(lastSeen.lastSeen)}`
              : lastSeen.status;
          setDisplayLastSeen(time); 
      } else if (apiLastSeen != '') {
        let time = `Last seen at ${getDateTimeInFormat(apiLastSeen.lastSeen)}`;
        setDisplayLastSeen(time);
      }
    } else {
      // User last seen not available yet
      setApiLastSeen('');
      setDisplayLastSeen('');
    }
  }

  // function calcLastSeen(lastSeen) {
  //   if (lastSeen) {
  //     if (lastSeen.userId === data.userId || lastSeen.userId === data.chatId) {
  //       getLocalData(constants.USER_ID)
  //         .then(id => {
  //           if (lastSeen.userId != id) {
  //             let time =
  //               lastSeen.status === 'Offline'
  //                 ? `Last seen at ${getDateTimeInFormat(lastSeen.lastSeen)}`
  //                 : lastSeen.status;
  //             setDisplayLastSeen(time);
  //           } else if (apiLastSeen != '' && lastSeen != '') {
  //             let time = `Last seen at ${getDateTimeInFormat(
  //               lastSeen.lastSeen,
  //             )}`;
  //             setDisplayLastSeen(time);
  //           } else if (apiLastSeen != '') {
  //             let time = `Last seen at ${getDateTimeInFormat(
  //               apiLastSeen.lastSeen,
  //             )}`;
  //             setDisplayLastSeen(time);
  //           } else {
  //             setDisplayLastSeen('');
  //           }
  //         })
  //         .catch(() => {
  //           if (apiLastSeen != '' && lastSeen != '') {
  //             let time = `Last seen at ${getDateTimeInFormat(
  //               lastSeen.lastSeen,
  //             )}`;
  //             setDisplayLastSeen(time);
  //           } else if (apiLastSeen != '') {
  //             let time = `Last seen at ${getDateTimeInFormat(
  //               apiLastSeen.lastSeen,
  //             )}`;
  //             setDisplayLastSeen(time);
  //           } else {
  //             setDisplayLastSeen('');
  //           }
  //         });
  //     } else if (apiLastSeen != '') {
  //       let time = `Last seen at ${getDateTimeInFormat(apiLastSeen.lastSeen)}`;
  //       setDisplayLastSeen(time);
  //     }
  //   } else {
  //     // User last seen not available yet
  //     setApiLastSeen('');
  //     setDisplayLastSeen('');
  //   }
  // }

  return (
    <View style={{elevation: 0}}>
      <CardItem style={styles.parentView}>
        <View style={{flexDirection: 'row'}}>
          <Icon
            name="arrow-left"
            type="MaterialCommunityIcons"
            style={styles.backIcon}
            onPress={() => navigation.goBack()}
          />
          <Thumbnail
            source={
              !data.chatImage && data.chatImage != ''
                ? {isStatic: true, uri: data.chatImage}
                : USER
            }
            style={styles.profileIcon}
          />
          <Body
            style={{
              flexDirection: 'column',
              marginLeft: 10,
            }}>
            <Text
              numberOfLines={1}
              style={
                displayLastSeen != '' ? styles.userName : styles.centerUserName
              }>
              {userType == constants.FRIEND ? data.userName : data.chatName}
            </Text>
            {displayLastSeen != '' && (
              <Text
                numberOfLines={1}
                ellipsizeMode="tail"
                style={[DEFAULT_STYLES.poppinsLight, styles.userMessage]}>
                {/* Last seen at {getDateTimeInFormat(data.chatTime)} */}
                {displayLastSeen}
              </Text>
            )}
          </Body>
          <View style={{flexDirection: 'row', justifyContent: 'space-evenly'}}>
            <Icon
              name="video"
              type="MaterialCommunityIcons"
              style={styles.menuIcons}
            />
            <Icon
              name="phone"
              type="MaterialCommunityIcons"
              style={styles.menuIcons}
            />
            <Icon
              name="dots-vertical"
              type="MaterialCommunityIcons"
              style={styles.menuIcons}
            />
          </View>
        </View>
      </CardItem>
    </View>
  );
}
Example #6
Source File: ContactsItem.js    From WhatsApp-Clone with MIT License 4 votes vote down vote up 
ContactsItem = ({item, navigation, userChatList}) => {
  async function checkExistingRoom() {
    let isMatch = false;
    if (userChatList && userChatList.length > 0) {
      for (let index = 0; index < userChatList.length; index++) {
        const element = userChatList[index];
        if (
          element.userId === item.userId ||
          element.userId === item.chatId ||
          element.chatId === item.userId ||
          element.chatId === item.chatId
        ) {
          navigateChatRoom(element);
          isMatch = true;
          break;
        }
      }

      if (!isMatch) {
        let chatModel = await getContactsChatModel(item);
        navigateChatRoom(chatModel);
      }
      isMatch = false;
    } else {
      let chatModel = await getContactsChatModel(item);
      navigateChatRoom(chatModel);
    }
  }

  function navigateChatRoom(chatModel) {
    navigation &&
      navigation.navigate(NAV_TYPES.CHAT_MESSAGE_SCREEN, {
        item: chatModel,
        isNewChat: true,
      });
  }

  return (
    <TouchableOpacity
      onPress={async () => {
        checkExistingRoom();
      }}>
      <Card transparent style={{elevation: 0, marginRight: -5, height: 80}}>
        <CardItem>
          <View style={styles.cardStyle}>
            {!item.thumbnailPath && <Thumbnail source={USER} />}
            {/* {item.thumbnailPath != '' && (
              <Thumbnail source={{isStatic: true, uri: item.thumbnailPath}} />
            )} */}
          </View>
          <Body
            style={{
              flexDirection: 'column',
              marginLeft: 15,
            }}>
            <Text
              numberOfLines={1}
              style={[DEFAULT_STYLES.poppinsSemiBold, styles.userName]}>
              {item.userName}
            </Text>
            <Text
              numberOfLines={2}
              style={[DEFAULT_STYLES.poppinsLight, styles.userMessage]}>
              {item.phoneNumber}
            </Text>
          </Body>
          <View>
            <Text style={[DEFAULT_STYLES.poppinsSemiBold, styles.userTime]}>
              {item.time}
            </Text>
            <Text style={[DEFAULT_STYLES.poppinsSemiBold, styles.textMsgCount]}>
              {item.numberType.toUpperCase()}
            </Text>
            {item.msgIcon != '' && (
              <Text
                style={styles.msgIcon}
                name={item.msgIcon}
                type={item.msgIconType}
              />
            )}
          </View>
        </CardItem>
      </Card>
    </TouchableOpacity>
  );
}
Example #7
Source File: MyStatusView.js    From WhatsApp-Clone with MIT License 4 votes vote down vote up 
MyStatusView = ({navigation, statusData, isUser, isBorder}) => {
  const statusImage =
    statusData && statusData.status && statusData.status.length > 0
      ? statusData.status[statusData.status.length - 1].image + ''
      : '';
  // console.log('Status Item : ', statusData);

  return (
    <TouchableOpacity
      onPress={() => {
        statusImage && statusImage != ''
          ? navigation.navigate(NAV_TYPES.STATUS_VIEW, {
              statusData: JSON.stringify(statusData),
              isUser: isUser,
            })
          : navigation.navigate(NAV_TYPES.CAMERA_VIEW, {});
      }}>
      <Card transparent style={{elevation: 0, marginRight: -5}}>
        <CardItem>
          <View style={{marginLeft: -5}}>
            <View
              style={
                isBorder
                  ? styles.circleView
                  : isUser
                  ? styles.circleNoView
                  : styles.circleSeenView
              }>
              <Thumbnail
                style={
                  isBorder
                    ? {width: 50, height: 50}
                    : isUser
                    ? {width: 60, height: 60, borderRadius: 100}
                    : {width: 50, height: 50}
                }
                source={statusImage ? {uri: statusImage} : PROFILE2}
              />
            </View>
            {isUser && (!statusImage || statusImage === '') && (
              <Icon
                type="MaterialCommunityIcons"
                name="plus-circle"
                color={GREEN}
                style={{
                  color: LIGHT_GREEN,
                  position: 'absolute',
                  bottom: -5,
                  right: -18,
                }}
              />
            )}
          </View>
          <Body
            style={{
              flexDirection: 'column',
              width: 800,
              marginLeft: 15,
            }}>
            <Text
              numberOfLines={1}
              style={[DEFAULT_STYLES.poppinsSemiBold, styles.userName]}>
              {isUser ? 'My Status' : statusData.userName}
            </Text>
            <TimeElapsed
              style={[DEFAULT_STYLES.poppinsLight, styles.userMessage]}
              time={
                statusData.lastStatusTime
                  ? statusData.lastStatusTime
                  : 'Tap to add status update'
              }
              // interval={1000}
              isValid={statusData != ''}
            />
            {/* <Text
              numberOfLines={2}
              style={[DEFAULT_STYLES.poppinsLight, styles.userMessage]}>
              {statusData.lastStatusTime
                ? getDateTimeStatusFormat(statusData.lastStatusTime)
                : 'Tap to add status update'}
            </Text> */}
          </Body>
          <View>
            {isUser && (
              <Icon
                style={styles.msgIcon}
                name="dots-horizontal"
                type="MaterialCommunityIcons"
              />
            )}
          </View>
        </CardItem>
      </Card>
    </TouchableOpacity>
  );
}
Example #8
Source File: StatusView.js    From WhatsApp-Clone with MIT License 4 votes vote down vote up 
StatusView = ({navigation}) => {
  var [state, dispatch] = useReducer(statusReducer, statusState);

  var {statusData, recentStatusList, viewedStatusList, refresh} = state;

  useFocusEffect(
    React.useCallback(() => {
      getUserStatusFromAPI(dispatch);
    }, []),
  );

  useEffect(() => {
    listenSocket();

    // return () => {
    //   alert('STATUS DISCONNECTED');
    //   socket.removeListener(constants.USER_STATUS);
    // };
  }, []);

  function listenSocket() {
    // socket.removeListener(constants.CHAT_LIST);
    socket.on(constants.USER_STATUS, async statusModel => {
      const id = await getLocalData(constants.USER_ID);
      if (statusModel.userId != id) {
        console.log('STATUS RECEIVED');
        getUserStatusFromAPI(dispatch);
      }
    });
  }

  return (
    <Container>
      <ScrollView nestedScrollEnabled style={{flex: 1, paddingBottom: 200}}>
        <View>
          <MyStatusView
            navigation={navigation}
            statusData={statusData}
            isUser 
            isBorder={false}
          />
          {recentStatusList.length > 0 && (
            <View>
              <_Divider style={{borderBottomWidth: 5}} />
              <Text style={[DEFAULT_STYLES.poppinsSemiBold, styles.userTime]}>
                RECENT UPDATES
              </Text>
              <RecentStatusView
                navigation={navigation}
                statusData={recentStatusList}
              />
            </View>
          )}
          {viewedStatusList.length > 0 && (
            <View>
              <_Divider style={{borderBottomWidth: 5}} />
              <Text style={[DEFAULT_STYLES.poppinsSemiBold, styles.userTime]}>
                VIEWED UPDATES
              </Text>
              <ViewedStatusView
                navigation={navigation}
                statusData={viewedStatusList}
              />
            </View>
          )}
        </View>
      </ScrollView>

      <View
        style={{
          flexDirection: 'column',
          position: 'absolute',
          bottom: 20,
          right: 20,
        }}>
        <Button
          rounded
          style={{
            backgroundColor: APP_BG_COLOR,
            width: 50,
            alignSelf: 'center',
            height: 50,
          }}>
          <Icon
            style={{color: TEXT_SUBTITLE, fontSize: 22}}
            name="pencil"
            type="MaterialCommunityIcons"
          />
        </Button>
        <Button
          rounded
          color={GREEN}
          style={styles.btnView}
          onPress={() => {
            navigation.navigate(NAV_TYPES.CAMERA_VIEW, {});
          }}>
          <Thumbnail circular source={ADD_STATUS} style={styles.thumbView} />
        </Button>
      </View>

      {/* <Fab
        active={true}
        direction="up"
        style={{backgroundColor: '#5067FF', position: 'absolute'}}
        position="bottomRight">
        <Thumbnail source={ADD_STATUS} />
        <Button style={{backgroundColor: '#EEF5F6'}}>
          <Icon
            style={{color: TEXT_SUBTITLE, fontSize: 24}}
            name="pencil"
            type="MaterialCommunityIcons"
          />
        </Button>
      </Fab> */}
    </Container>
  );
}