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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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>
);
}
