javascript – react-native-snap-carousel sizing for iPad and iPhone

iPad measurement

iPhone measurement

Im having bother with sizing for iPad and different tablets with the Carousel. Im caught on the best way to correctly get each units to look the identical. I figured that the scaling is caught on sure dimensions for the carousel and it scales with it to make it larger. I simply do not know the best way to modify them for a unique display.

import React, { Part } from "react";
import {
  ImageBackground,
  Textual content,
  View,
  Picture,
  Dimensions,
  StyleSheet,
  Pressable,
  SafeAreaView,
} from "react-native";
import Carousel from "react-native-snap-carousel";
import { Pagination } from "react-native-snap-carousel";
import { scrollInterpolator, animatedStyles } from "./utils/animations";

const SLIDER_WIDTH = Dimensions.get("window").width;
const SLIDER_HEIGHT = Dimensions.get("window").peak;
const ITEM_WIDTH = Math.spherical(SLIDER_WIDTH * 0.8); //was 0.85
const ITEM_HEIGHT = Math.spherical((ITEM_WIDTH * 6) / 4);


export default class App extends Part {
  constructor(props) {
    tremendous(props);
    this._renderItem = this._renderItem.bind(this);
  }

  _renderItem({ merchandise }) {
    return (
      <View model={kinds.itemContainer}>
        <Pressable onPress={() => this.props.navigation.navigate(merchandise.key)}>
          <View model={kinds.itemFlashcard}>
            <ImageBackground
              supply={require("../property/flashcards/flashcardbg.png")}
              model={{ width: ITEM_WIDTH * 0.89, peak: ITEM_HEIGHT }} //.89
            >
              <Picture supply={merchandise.icon} model={kinds.itemImage} />
              <Textual content model={kinds.itemLabel}>{`${merchandise.title}`}</Textual content>
            </ImageBackground>
          </View>
        </Pressable>
      </View>
    );
  }

  render() {
    return (
      <View model={[styles.fullview]}>
        <Carousel
          ref={(c) => (this.carousel = c)}
          knowledge={DATA}
          renderItem={this._renderItem}
          sliderWidth={SLIDER_WIDTH}
          itemWidth={ITEM_WIDTH}
          containerCustomStyle={kinds.carouselContainer}
          inactiveSlideShift={0}
          onSnapToItem={(index) => this.setState({ index })}
          scrollInterpolator={scrollInterpolator}
          slideInterpolatedStyle={animatedStyles}
          useScrollView={true}
        />
      </View>
    );
  }
}

const kinds = StyleSheet.create({
  container: {
    // flex: 1,
  },
  fullview: {
    flex: 1,
    justifyContent: "middle",
    alignItems: "middle",
    backgroundColor: "#CDE7E1",
  },
  carouselContainer: {
    marginTop: SLIDER_HEIGHT * 0.06,
    // marginBottom: SLIDER_HEIGHT * 0.06,
  },
  itemContainer: {
    justifyContent: "middle",
    width: ITEM_WIDTH,
    peak: ITEM_HEIGHT,
    // show: "flex",
  },
  itemFlashcard: {
    // show: "flex",
    justifyContent: "middle",
    alignItems: "middle",
    peak: "100%",
    width: "100%",
    textAlign: "middle",
  },
  itemImage: {
    marginTop: "35%",
    width: "100%",
    peak: "50%",
    justifyContent: "middle",
    alignItems: "middle",
    resizeMode: "include",
  },
  itemLabel: {
    marginTop: "18%",
    textAlign: "middle",
    coloration: "black",
    fontSize: 50,
    fontWeight: "500",
  },
  counter: {
    marginTop: 25,
    fontSize: 30,
    fontWeight: "daring",
    textAlign: "middle",
  },
});