react-native#useWindowDimensions JavaScript Examples
The following examples show how to use
react-native#useWindowDimensions.
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: BlogDetail.js From Get-Placed-App with MIT License | 6 votes |
|
function JobDetail(props) {
const { id, title, snippet, author, body, post_date } = props.route.params.data;
const { width } = useWindowDimensions();
var date = new Date(`${post_date}`)
const source = {
html: `
${body}`
};
const tagsStyles = {
body: {
marginLeft: 20,
marginRight: 20,
},
};
return (
<View>
<ScrollView style={styles.Top}>
<View style={styles.headerStyle}>
<Title style={{ fontSize: 31, marginLeft: 10, fontWeight: 'bold' }}>{title}<Text style={{ fontSize: 14, fontWeight: 'normal', color: '#808080' }}> - ( {date.getDate()}-{date.getMonth()}-{date.getFullYear()})</Text></Title>
</View>
<View>
<RenderHtml
tagsStyles={tagsStyles}
contentWidth={width}
source={source}
/>
</View>
</ScrollView>
</View >
)
}
Example #2
| Source File: index.native.jsx From polaris with Apache License 2.0 | 6 votes |
|
RouteNavigator = ({
routes = presetRoutes,
defaultPath = presetDefaultPath,
LayoutComponent = Layout
}) => {
const dimensions = useWindowDimensions()
const { t } = useTranslation()
const viewRoutes = routes.filter(isViewRoute)
viewRoutes.sort(
(a, b) =>
getMenuIndexSortValue(a.menuIndex) - getMenuIndexSortValue(b.menuIndex)
)
const menuNames = viewRoutes.filter(isMenuRoute).map(route => route.path)
return (
<RoutesProvider routes={routes} defaultPath={defaultPath}>
<Drawer.Navigator
initialRouteName={defaultPath}
drawerType={dimensions.width >= 768 ? 'permanent' : 'front'}
drawerContent={withMenuFilter(DrawerContent, menuNames)}
>
{viewRoutes.map(route => (
<Drawer.Screen
name={route.path}
component={withLayout(route.View, LayoutComponent)}
options={({ route: { params } }) => ({
title: replaceParams(t(route.name), params)
})}
key={route.path}
/>
))}
</Drawer.Navigator>
</RoutesProvider>
)
}
Example #3
| Source File: JobDetail.js From Get-Placed-App with MIT License | 5 votes |
|
function JobDetail(props) {
const { id, title, snippet, author, Company_image, Job_Description, apply_link, job_type, post_date } = props.route.params.data;
const { width } = useWindowDimensions();
var date = new Date(`${post_date}`)
const source = {
html: `
${Job_Description}`
};
const tagsStyles = {
body: {
marginLeft: 20,
marginRight: 20,
},
};
return (
<View>
<ScrollView style={styles.Top}>
<View style={styles.headerStyle}>
<Title style={{ fontSize: 31, marginLeft: 20, fontWeight: 'bold' }}>{title}<Text style={{ fontSize: 14, fontWeight: 'normal', color: '#808080' }}> - ( {date.getDate()}-{date.getMonth()}-{date.getFullYear()})</Text></Title>
</View>
<View>
<Image
source={{ uri: `${Company_image}` }}
style={{ width: 300, height: 230, marginLeft: 30, }}
/>
</View>
<View>
<RenderHtml
tagsStyles={tagsStyles}
contentWidth={width}
source={source}
/>
</View>
<View style={[{ width: "90%", marginTop: 5, marginBottom: 25, borderRadius: 10, alignItems: 'center' }]}>
<Button
title="Apply"
color="#002223"
style={[{ borderRadius: 100, }]}
onPress={() => Linking.openURL(apply_link)}
/>
</View>
</ScrollView>
</View >
)
}
Example #4
| Source File: ResourceDetail.js From Get-Placed-App with MIT License | 4 votes |
|
function ResourceDetail(props) {
const width = (useWindowDimensions().width);
const height = width * 0.6;
const [active, setActive] = useState(0);
const change = ({ nativeEvent }) => {
const slide = Math.ceil(
nativeEvent.contentOffset.x / nativeEvent.layoutMeasurement.width,
);
if (slide !== active) {
setActive(slide);
}
}
const { id, title, docs, author, course1_title, course1_Img, course1_link, course2_title, course2_Img, course2_link, course3_title, course3_Img, course3_link, course4_title, course4_Img, course4_link, course5_title, course5_Img, course5_link,
channel1_title, channel1_Img, channel1_link, channel2_title, channel2_Img, channel2_link, channel3_title, channel3_Img, channel3_link, channel4_title, channel4_Img, channel4_link, channel5_title, channel5_Img, channel5_link,
Website1_title, Website1_Img, Website1_link, Website2_title, Website2_Img, Website2_link, Website3_title, Website3_Img, Website3_link, Website4_title, Website4_Img, Website4_link, Website5_title, Website5_Img, Website5_link } = props.route.params.data;
const course = [
{
image: `${course1_Img}`,
title: `${course1_title}`,
link: `${course1_link}`,
},
{
image: `${course2_Img}`,
title: `${course2_title}`,
link: `${course2_link}`,
},
{
image: `${course3_Img}`,
title: `${course3_title}`,
link: `${course3_link}`,
},
{
image: `${course4_Img}`,
title: `${course4_title}`,
link: `${course4_link}`,
},
{
image: `${course5_Img}`,
title: `${course5_title}`,
link: `${course5_link}`,
},
];
const channel = [
{
image: `${channel1_Img}`,
title: `${channel1_title}`,
link: `${channel1_link}`,
},
{
image: `${channel2_Img}`,
title: `${channel2_title}`,
link: `${channel2_link}`,
},
{
image: `${channel3_Img}`,
title: `${channel3_title}`,
link: `${channel3_link}`,
},
{
image: `${channel4_Img}`,
title: `${channel4_title}`,
link: `${channel4_link}`,
},
{
image: `${channel5_Img}`,
title: `${channel5_title}`,
link: `${channel5_link}`,
},
];
const website = [
{
image: `${Website1_Img}`,
title: `${Website1_title}`,
link: `${Website1_link}`,
},
{
image: `${Website2_Img}`,
title: `${Website2_title}`,
link: `${Website2_link}`,
},
{
image: `${Website3_Img}`,
title: `${Website3_title}`,
link: `${Website3_link}`,
},
{
image: `${Website4_Img}`,
title: `${Website4_title}`,
link: `${Website4_link}`,
},
{
image: `${Website5_Img}`,
title: `${Website5_title}`,
link: `${Website5_link}`,
},
];
return (
<View>
<ScrollView style={styles.Top}>
<View style={styles.headerStyle}>
<Title style={{ fontSize: 31, fontFamily: 'sans-serif', fontWeight: 'bold' }}>{title}</Title>
</View>
<View
style={{
borderBottomColor: 'grey',
borderBottomWidth: 0.5,
marginLeft: 70,
marginRight: 70,
}}
/>
<View style={[{ width: "90%", margin: 10, alignItems: 'center', }]}>
<Button
title="docs"
color="#002223"
style={[{
borderRadius: 10,
}]}
onPress={() => Linking.openURL(docs)}
/>
</View>
<Title style={{ fontSize: 25 }}>Best Courses</Title>
<View
style={{
borderBottomColor: 'grey',
borderBottomWidth: 0.5,
width: "100%",
alignItems: 'center',
justifyContent: 'center',
marginBottom: 10,
}}
/>
<View>
<ScrollView
pagingEnabled
horizontal
onScroll={change}
showHorizontalScrollIndicator={false}
>
{course.map((image, index) => (
<View>
<TouchableHighlight key={index} onPress={() => Linking.openURL(image.link)}>
<Image
key={index}
source={{ uri: image.image }}
style={{ width, height, resizeMode: 'cover' }}
/>
</TouchableHighlight>
<View style={styles.backdropView}>
<Text style={styles.headline} key={index} onPress={() => Linking.openURL(image.link)}>{image.title}</Text>
</View>
</View>
))}
</ScrollView>
<View style={styles.pagination}>
{course.map((i, k) => (
<Text key={k} style={k == active ? styles.activeDot : styles.dot}>
•
</Text>
))}
</View>
</View>
<Title style={{ fontSize: 25 }}>Youtube Channels</Title>
<View
style={{
borderBottomColor: 'grey',
borderBottomWidth: 0.5,
width: "100%",
alignItems: 'center',
justifyContent: 'center',
marginBottom: 10,
}}
/>
<View>
<ScrollView
pagingEnabled
horizontal
onScroll={change}
showHorizontalScrollIndicator={false}
>
{channel.map((image, index) => (
<View>
<TouchableHighlight onPress={() => Linking.openURL(image.link)}>
<Image
key={index}
source={{ uri: image.image }}
style={{ width, height, resizeMode: 'cover' }}
/>
</TouchableHighlight>
<View style={styles.backdropView}>
<Text style={styles.headline} onPress={() => Linking.openURL(image.link)}>{image.title}</Text>
</View>
</View>
))}
</ScrollView>
<View style={styles.pagination1}>
{channel.map((i, k) => (
<Text key={k} style={k == active ? styles.activeDot : styles.dot}>
•
</Text>
))}
</View>
</View>
<Title style={{ fontSize: 25 }}>Useful Websites</Title>
<View
style={{
borderBottomColor: 'grey',
borderBottomWidth: 0.5,
width: "100%",
alignItems: 'center',
justifyContent: 'center',
marginBottom: 10,
}}
/>
<View>
<ScrollView
pagingEnabled
horizontal
onScroll={change}
showHorizontalScrollIndicator={false}
>
{website.map((image, index) => (
<View>
<TouchableHighlight onPress={() => Linking.openURL(image.link)}>
<Image
key={index}
source={{ uri: image.image }}
style={{ width, height, resizeMode: 'cover' }}
/>
</TouchableHighlight>
<View style={styles.backdropView}>
<Text style={styles.headline} onPress={() => Linking.openURL(image.link)}>{image.title}</Text>
</View>
</View>
))}
</ScrollView>
<View style={styles.pagination2}>
{website.map((i, k) => (
<Text key={k} style={k == active ? styles.activeDot : styles.dot}>
•
</Text>
))}
</View>
</View>
</ScrollView>
</View >
)
}
Example #5
| Source File: index.js From react-native-search-component with MIT License | 4 votes |
|
SearchComponent = forwardRef((props, ref) => {
const [searchInputFocussed, setSearchInputFocussed] = useState(false);
const { width } = useWindowDimensions();
const memoizedTextInputOnFocusWidth = useMemo(() => width - (50 + 32 + 32), [width]);
const memoizedTextInputOnBlurWidth = useMemo(() => width - 32, [width]);
const focusTextInput = useCallback(() => setSearchInputFocussed(true), []);
const blurTextInput = useCallback(() => setSearchInputFocussed(false), []);
const handleChange = useCallback((e) => {
props?.onChange(e);
}, [props?.onChange]);
const handleClearSearch = useCallback(() => {
props?.onSearchClear();
})
const handlePressCancel = useCallback(() => {
searchTextInput?.blur();
props?.onSearchClear();
});
useImperativeHandle(ref, () => ({
searchInputRef() {
return searchTextInput;
}
}));
useEffect(() => {
if (searchInputFocussed) {
spring(textInputWidth, {
toValue: memoizedTextInputOnFocusWidth,
mass: 1,
stiffness: 120,
damping: 20,
}).start();
timing(cancelTextOpacity, {
toValue: 1,
duration: 200,
easing: Easing.linear
}).start();
} else {
spring(textInputWidth, {
toValue: memoizedTextInputOnBlurWidth,
mass: 1,
stiffness: 120,
damping: 20,
}).start();
timing(cancelTextOpacity, {
toValue: 0,
duration: 200,
easing: Easing.linear
}).start();
}
}, [searchInputFocussed]);
return (
<Animated.View style={styles.searchInputWrapper}>
<Animated.View style={styles.searchIconWrapper}>
<SearchIcon theme={props?.theme} />
</Animated.View>
<Animated.View style={{ width: textInputWidth, paddingVertical: 4 }}>
<TextInput
autoCorrect={false}
autoCompleteType='off'
value={props?.value}
onChange={handleChange}
ref={ref => searchTextInput = ref}
onFocus={focusTextInput}
onBlur={blurTextInput}
style={[
styles.searchInputStyle,
{
backgroundColor: styledTheme[props?.theme].textInputBackground,
color: styledTheme[props?.theme].textColor,
},
props.customSearchInputStyle,
]}
placeholder={props?.placeholder}
placeholderTextColor={props?.placeholderTextColor || styledTheme[props?.theme].placeholderTextColor}
/>
{
props?.isLoading ? (
<View style={styles.loadingIconWrapper} >
<ActivityIndicator size='small' color={props?.loadingTintColor} />
</View>
) : (searchInputFocussed && props?.value?.length > 0) && (
<TouchableOpacity style={styles.closeIconWrapper} onPress={handleClearSearch}>
<CloseIcon />
</TouchableOpacity>
)
}
</Animated.View>
<TouchableOpacity style={{ display: 'flex', justifyContent: 'center' }} onPress={handlePressCancel}>
<Animated.Text style={[{ paddingLeft: 16, fontSize: 17, color: props.cancelColor, opacity: cancelTextOpacity }, props.customCancelTextStyle]}>
Cancel
</Animated.Text>
</TouchableOpacity>
</Animated.View>
)
})
Example #6
| Source File: index.js From react-native-search-component with MIT License | 4 votes |
|
SearchComponent = forwardRef((props, ref) => {
const [searchInputFocussed, setSearchInputFocussed] = useState(false);
const { width } = useWindowDimensions();
const memoizedTextInputOnFocusWidth = useMemo(() => width - (50 + 32 + 32), [width]);
const memoizedTextInputOnBlurWidth = useMemo(() => width - 32, [width]);
const focusTextInput = useCallback(() => setSearchInputFocussed(true), []);
const blurTextInput = useCallback(() => setSearchInputFocussed(false), []);
const handleChange = useCallback((e) => {
props?.onChange(e);
}, [props?.onChange]);
const handleClearSearch = useCallback(() => {
props?.onSearchClear();
})
const handlePressCancel = useCallback(() => {
searchTextInput?.blur();
props?.onSearchClear();
});
useImperativeHandle(ref, () => ({
searchInputRef() {
return searchTextInput;
}
}));
useEffect(() => {
if (searchInputFocussed) {
spring(textInputWidth, {
toValue: memoizedTextInputOnFocusWidth,
mass: 1,
stiffness: 120,
damping: 20,
}).start();
timing(cancelTextOpacity, {
toValue: 1,
duration: 200,
easing: Easing.linear
}).start();
} else {
spring(textInputWidth, {
toValue: memoizedTextInputOnBlurWidth,
mass: 1,
stiffness: 120,
damping: 20,
}).start();
timing(cancelTextOpacity, {
toValue: 0,
duration: 200,
easing: Easing.linear
}).start();
}
}, [searchInputFocussed]);
return (
<Animated.View style={styles.searchInputWrapper}>
<Animated.View style={styles.searchIconWrapper}>
<SearchIcon theme={props?.theme} />
</Animated.View>
<Animated.View style={{ width: textInputWidth, paddingVertical: 4 }}>
<TextInput
autoCorrect={false}
autoCompleteType='off'
value={props?.value}
onChange={handleChange}
ref={ref => searchTextInput = ref}
onFocus={focusTextInput}
onBlur={blurTextInput}
style={[
styles.searchInputStyle,
{
backgroundColor: styledTheme[props?.theme].textInputBackground,
color: styledTheme[props?.theme].textColor,
},
props.customSearchInputStyle,
]}
placeholder={props?.placeholder}
placeholderTextColor={props?.placeholderTextColor || styledTheme[props?.theme].placeholderTextColor}
/>
{
props?.isLoading ? (
<View style={styles.loadingIconWrapper} >
<ActivityIndicator size='small' color={props?.loadingTintColor} />
</View>
) : (searchInputFocussed && props?.value?.length > 0) && (
<TouchableOpacity style={styles.closeIconWrapper} onPress={handleClearSearch}>
<CloseIcon />
</TouchableOpacity>
)
}
</Animated.View>
<TouchableOpacity style={{ display: 'flex', justifyContent: 'center' }} onPress={handlePressCancel}>
<Animated.Text style={[{ paddingLeft: 16, fontSize: 17, color: props.cancelColor, opacity: cancelTextOpacity }, props.customCancelTextStyle]}>
Cancel
</Animated.Text>
</TouchableOpacity>
</Animated.View>
)
})
