react-native#Dimensions JavaScript Examples

The following examples show how to use react-native#Dimensions. 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: searchNavigator.js    From react-native-instagram-clone with MIT License 6 votes vote down vote up 
export default function searchNavigator() {
  const Stack = createStackNavigator();

  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Search"
        component={searchScreen}
        options={{
          title: '',
          headerStyle: {
            backgroundColor: colors.bottomBackGround,
            shadowColor: 'transparent',
          },
          headerTitle: () => <View></View>,
          headerLeft: () => (
            <View style={{marginHorizontal: 5, marginVertical: 10}}>
              <TextInput
                style={{
                  backgroundColor: colors.textInputBackground,
                  height: 35,
                  width: Dimensions.get('screen').width - 10,
                  fontWeight: 'bold',
                  borderRadius: 10,
                  paddingStart: 20,
                  fontSize: 16,
                  color: 'white',
                }}
                placeholder="Search"
                placeholderTextColor={colors.textFaded2}
              />
            </View>
          ),
        }}
      />
    </Stack.Navigator>
  );
}
Example #2
Source File: index.js    From bluezone-app with GNU General Public License v3.0 6 votes vote down vote up 
render() {
    const {news} = this.state;
    const {route} = this.props;
    const item = (route && route.params.item) || {};
    const {Language} = configuration;
    //
    const title =
      (Language === 'vi' ? item.title : item.titleEn) ||
      item.title ||
      item.titleEn;

    return (
      <SafeAreaView style={{flex: 1, backgroundColor: '#ffffff'}}>
        <Header
          colorIcon={'#000000'}
          styleHeader={{marginTop: 20}}
          styleTitle={{paddingHorizontal: 50}}
          title={title}
        />
        <ScrollView>
          <HTML
            html={news?.data?.content}
            tagsStyles={CUSTOM_STYLES}
            imagesMaxWidth={Dimensions.get('window').width}
            allowFontScaling={false}
          />
        </ScrollView>
      </SafeAreaView>
    );
  }
Example #3
Source File: App.js    From Spring2020_MyFood_FrontEnd with GNU General Public License v3.0 6 votes vote down vote up 
export default function App() {

  const onLayout = (e)  => {
    const {width, height} = Dimensions.get('window')
    console.log(width, height)
  }

  return (
    <NavigationContainer>
          <Stack.Navigator initialRouteName="Login">
          <Stack.Screen name="Login" component={Login} />
          <Stack.Screen name="Home" component={Home} options={{ headerLeft: null }} />
          <Stack.Screen name="Fridge" component={Fridge} />
          <Stack.Screen name="Scanner" component={Scanner} />
          <Stack.Screen name="ShoppingCart" component={ShoppingCart} />
          <Stack.Screen name="Inside your Fridge" component={Inside}/>
          </Stack.Navigator>
    </NavigationContainer>
  );


}
Example #4
Source File: CollapsibleTabView.js    From react-native-collapsible-tabview with MIT License 6 votes vote down vote up 
TabScene = ({
  numCols,
  data,
  renderItem,
  onGetRef,
  scrollY,
  onScrollEndDrag,
  onMomentumScrollEnd,
  onMomentumScrollBegin,
}) => {
  const windowHeight = Dimensions.get('window').height;

  return (
    <Animated.FlatList
      scrollToOverflowEnabled={true}
      numColumns={numCols}
      ref={onGetRef}
      scrollEventThrottle={16}
      onScroll={Animated.event([{nativeEvent: {contentOffset: {y: scrollY}}}], {
        useNativeDriver: true,
      })}
      onMomentumScrollBegin={onMomentumScrollBegin}
      onScrollEndDrag={onScrollEndDrag}
      onMomentumScrollEnd={onMomentumScrollEnd}
      ItemSeparatorComponent={() => <View style={{height: 10}} />}
      ListHeaderComponent={() => <View style={{height: 10}} />}
      contentContainerStyle={{
        paddingTop: HeaderHeight + TabBarHeight,
        paddingHorizontal: 10,
        minHeight: windowHeight - TabBarHeight,
      }}
      showsHorizontalScrollIndicator={false}
      data={data}
      renderItem={renderItem}
      showsVerticalScrollIndicator={false}
      keyExtractor={(item, index) => index.toString()}
    />
  );
}
Example #5
Source File: ClusteredMapView.js    From guardioes-app with Apache License 2.0 6 votes vote down vote up 
ClusteredMapView.defaultProps = {
  minZoom: 1,
  maxZoom: 16,
  extent: 512,
  accessor: 'location',
  animateClusters: true,
  clusteringEnabled: true,
  clusterPressMaxChildren: 100,
  preserveClusterPressBehavior: true,
  width: Dimensions.get('window').width,
  height: Dimensions.get('window').height,
  layoutAnimationConf: LayoutAnimation.Presets.spring,
  edgePadding: { top: 10, left: 10, right: 10, bottom: 10 }
}
Example #6
Source File: Header.js    From monsuivipsy with Apache License 2.0 6 votes vote down vote up 
styles = StyleSheet.create({
  container: {
    flex: 0,
    // backgroundColor: "transparent",
    marginRight: "auto",
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    paddingBottom: 5,
  },
  title: {
    textAlign: "center",
    fontSize: Dimensions.get("window").width > 380 ? 15 : 14,
    color: "#fff",
    marginRight: "auto",
    fontWeight: "600",
    flex: 1,
  },
})
Example #7
Source File: GifSearch.js    From react-native-gif-search with ISC License 6 votes vote down vote up 
componentDidMount() {
      this.refreshGifs()
      if (this.props.onBackPressed != null){
          BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
      }
      if (this.numColumns > 1) {   
          Dimensions.addEventListener('change', () => {
              this.setState({gifSize: Dimensions.get('window').width / this.numColumns - 15})
          })     
      }
  }
Example #8
Source File: Intro.js    From actual with MIT License 6 votes vote down vote up 
function Feature({ title, subtitle }) {
  let windowDimens = Dimensions.get('window');

  return (
    <View
      style={{
        width: windowDimens.width,
        alignItems: 'center'
      }}
    >
      <View style={{ width: 335 }}>
        <Text
          style={{
            color: 'white',
            fontSize: 25,
            fontWeight: '700',
            alignSelf: 'center'
          }}
        >
          {title}
        </Text>
        <Text
          style={{
            color: 'white',
            fontSize: 17,
            marginTop: 20,
            lineHeight: 25
          }}
        >
          {subtitle}
        </Text>
      </View>
    </View>
  );
}
Example #9
Source File: MovieBackdrop.js    From MoviesDaily with MIT License 6 votes vote down vote up 
_styles = StyleSheet.create({
  container: {
    height: Dimensions.get("window").height / 2.5,
    backgroundColor: black,
  },

  imageStyle: {
    flex: 1,
    height: Dimensions.get("window").width * 1.7777,
    width: Dimensions.get("window").width,
  },

  gradientImage: {
    flex: 1,
    position: "absolute",
    height: "100%",
    width: "100%",
  },
})
Example #10
Source File: Checkout.js    From salyd with GNU General Public License v3.0 6 votes vote down vote up 
styles = StyleSheet.create({
    container: {
        backgroundColor: colors.back,
        height: Dimensions.get('window').height
    },
    button: {
        margin: 10,
        borderRadius: 50,
        color: colors.back
    },
    modalView: {
        margin: 20,
        backgroundColor: "white",
        borderRadius: 20,
        padding: 35,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5
    },
    centeredView: {
        flex: 1,
        backgroundColor: "#00000044",
        justifyContent: "center",
        alignItems: "center",
    },
})
Example #11
Source File: GridImageViewer.js    From react-native-grid-image-viewer with MIT License 6 votes vote down vote up 
styles = StyleSheet.create({
  background: {
    flex: 1,
  },
  flatlist: {
    flex: 1,
  },
  unit: {
    flexDirection: 'row',
  },
  unit_item: {
    margin: 1.5,
    flex: 1,
  },
  img: {
    flex: 1,
  },
  img_modal: {
    height: Dimensions.get('window').height,
    width: Dimensions.get('window').width,
    resizeMode: 'contain',
  },
  cross: {
    position: 'absolute',
    alignSelf: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    left: 0,
  },
})
Example #12
Source File: hooks.js    From rakning-c19-app with MIT License 6 votes vote down vote up 
// Source: https://github.com/facebook/react-native/blob/3ed1b1f4ff155d092025fbb679e009cf52821f97/Libraries/Utilities/useWindowDimensions.js
export function useWindowDimensions() {
  const [dimensions, setDimensions] = useState(() => Dimensions.get('window'));

  useEffect(() => {
    function handleChange({ window }) {
      if (
        dimensions.width !== window.width ||
        dimensions.height !== window.height ||
        dimensions.scale !== window.scale ||
        dimensions.fontScale !== window.fontScale
      ) {
        setDimensions(window);
      }
    }

    Dimensions.addEventListener('change', handleChange);
    // We might have missed an update between calling `get` in render and
    // `addEventListener` in this handler, so we set it here. If there was
    // no change, React will filter out this update as a no-op.
    handleChange({ window: Dimensions.get('window') });

    return () => {
      Dimensions.removeEventListener('change', handleChange);
    };
  }, [dimensions]);

  return dimensions;
}
Example #13
Source File: HomeTabScreen.js    From react-native-booking-app with MIT License 6 votes vote down vote up 
constructor(props) {
        super(props);

        Moment.locale('en');

        const width = Dimensions.get('window').width - 30;

        this._foodTableHead = ['Name', 'Description', 'Time', 'Action'];
        this._foodWidthArr = [width/4, width/4, width/4, width/4 - 1];
        this._foodTableData = [];
        this._foodTableDataKey = [];

        this._waterTableHead = ['Size', 'Comment', 'Time', 'Action'];
        this._waterWidthArr = [width/4, width/4, width/4, width/4 - 1];
        this._waterTableData = [];
        this._waterTableDataKey = [];

        this._weightTableHead = ['Weight', 'Inch', 'Comment', 'Time', 'Action'];
        this._weightWidthArr = [width/5, width/5, width/5, width/5, width/5 - 1];
        this._weightTableData = [];
        this._weightTableDataKey = [];

        this.state = {
            currentDate: '',
            isToday: false,
            ///////////////
            selectedIndex: HomeTabScreen.TabItem.Food,
            ///////////////
            tableHead: this._foodTableHead,
            widthArr: this._foodWidthArr,
            tableData: [],
            tableDataKey: [],
        }

        this.auth = firebase.auth();
        this.db = firebase.database();
    }
Example #14
Source File: reactionDetails.js    From cometchat-pro-react-native-ui-kit with MIT License 6 votes vote down vote up 
render() {
    const { visible, close } = this.props;

    return (
      <Modal transparent animated animationType="fade" visible={visible}>
        <View style={style.reactionDetailBottomSheet}>
          <BottomSheet
            ref={this.sheetRef}
            snapPoints={[Dimensions.get('window').height - 80, 0]}
            borderRadius={30}
            initialSnap={1}
            enabledInnerScrolling={false}
            enabledContentTapInteraction
            overdragResistanceFactor={10}
            renderContent={this.renderContent}
            onCloseEnd={() => {
              close();
            }}
          />
        </View>
      </Modal>
    );
  }
Example #15
Source File: index.js    From designcode-app with MIT License 6 votes vote down vote up 
export default function Course(props) {
  const [cardWith, setCardWidth] = useState(getCourseWidth(width));

  function adaptlayout(dimension) {
    setCardWidth(getCourseWidth(dimension.window.width));
  }

  useEffect(() => {
    Dimensions.addEventListener("change", adaptlayout);

    return Dimensions.removeEventListener("change", adaptlayout);
  }, [adaptlayout]);

  return (
    <Container style={{ width: cardWith }}>
      <Cover>
        <Image source={props.image} />
        <Logo source={props.logo} resizeMode="contain" />
        <Subtitle>{props.subtitle}</Subtitle>
        <Title>{props.title}</Title>
      </Cover>
      <Content>
        <Avatar source={props.avatar} />
        <Caption>{props.caption}</Caption>
        <Author>Taught by {props.author}</Author>
      </Content>
    </Container>
  );
}
Example #16
Source File: PostImage.js    From react-native-instagram-clone with MIT License 5 votes vote down vote up 
Styles = StyleSheet.create({
  postImg: {
    height: Dimensions.get('screen').height / 3,
    width: Dimensions.get('screen').width,
    resizeMode: 'contain',
  },
})
Example #17
Source File: demo1.js    From react-native-select-dropdown with MIT License 5 votes vote down vote up 
{width} = Dimensions.get('window')
Example #18
Source File: dimension.js    From bluezone-app with GNU General Public License v3.0 5 votes vote down vote up 
widthPercentageToDP = widthPercent => {
  const screenWidth = Dimensions.get('window').width;
  // Convert string input to decimal number
  const elemWidth = parseFloat(widthPercent);
  return PixelRatio.roundToNearestPixel((screenWidth * elemWidth) / 100);
}
Example #19
Source File: ProductDetail.js    From Alfredo-Mobile with MIT License 5 votes vote down vote up 
{ width } = Dimensions.get('window')
Example #20
Source File: wallpaper-app-container.js    From React-Messenger-App with MIT License 5 votes vote down vote up 
{ height, width } = Dimensions.get( 'screen' )
Example #21
Source File: BiometricAuthScreen.js    From filen-mobile with GNU Affero General Public License v3.0 5 votes vote down vote up 
window = Dimensions.get("window")
Example #22
Source File: CountryPicker.js    From react-native-country-codes-picker with MIT License 5 votes vote down vote up 
height = Dimensions.get('window').height
Example #23
Source File: layout.js    From Baku with GNU General Public License v3.0 5 votes vote down vote up 
width = Dimensions.get('window').width
Example #24
Source File: CollapsibleTabView.js    From react-native-collapsible-tabview with MIT License 5 votes vote down vote up 
tab1ItemSize = (Dimensions.get('window').width - 30) / 2
Example #25
Source File: CatSliderItem.js    From haven with MIT License 5 votes vote down vote up 
{ width: screenWidth } = Dimensions.get('screen')
Example #26
Source File: QRReader.js    From universal-verifier-app with GNU General Public License v3.0 5 votes vote down vote up 
screenHeight = Math.round(Dimensions.get('window').height)
Example #27
Source File: scalling.js    From guardioes-app with Apache License 2.0 5 votes vote down vote up 
{ width, height } = Dimensions.get('window')
Example #28
Source File: RRImage.js    From RRWallet with MIT License 5 votes vote down vote up 
{ scale } = Dimensions.get("window")