Eelement type is invalid

riyah · October 22, 2020, 2:43pm

Please provide the following:

SDK Version:
Platforms(Android/iOS/web/all):

Replace this section with as much relevant information as possible and any relevant code along with your question.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

i am getting this error i don’t know what’s wrong .it work fine in snake.
please help .
my code

import React from ‘react’;
import {
Dimensions,
Image,
Slider,
StyleSheet,
Text,
TouchableHighlight,
View,
Button,
} from ‘react-native’;
import { Asset } from ‘expo-asset’;
import { Audio,Video} from ‘expo-av’;
import * as Font from ‘expo-font’;

import { MaterialIcons } from ‘@expo/vector-icons’;

import * as MediaLibrary from ‘expo-media-library’;

class Icon {
constructor(module, width, height) {
this.module = module;
this.width = width;
this.height = height;
Asset.fromModule(this.module).downloadAsync();
}
}

class PlaylistItem {
constructor(name, uri, isVideo) {
this.name = name;
this.uri = uri;
this.isVideo = isVideo;
}
}

const PLAYLIST = [
new PlaylistItem(
‘Comfort Fit - “Sorry”’,
‘https://s3.amazonaws.com/exp-us-standard/audio/playlist-example/Comfort_Fit_-_03_-_Sorry.mp3’,
false
),
];

const ICON_THROUGH_EARPIECE = ‘speaker-phone’;
const ICON_THROUGH_SPEAKER = ‘speaker’;

const ICON_PLAY_BUTTON = new Icon(
// require(“./assets/images/play_button.png”),
require(‘./assets/images/play_button@2x.png’),
34,
51
);
const ICON_PAUSE_BUTTON = new Icon(
//require(“./assets/images/pause_button.png”),
require(‘./assets/images/pause_button@2x.png’),
34,
51
);
const ICON_STOP_BUTTON = new Icon(
//require(“./assets/images/stop_button.png”),
require(‘./assets/images/stop_button@2x.png’),
22,
22
);
const ICON_FORWARD_BUTTON = new Icon(
//require(“./assets/images/forward_button.png”),
require(‘./assets/images/forward_button@2x.png’),
33,
25
);
const ICON_BACK_BUTTON = new Icon(
//require(“./assets/images/back_button.png”),
require(‘./assets/images/back_button@2x.png’),
33,
25
);

const ICON_LOOP_ALL_BUTTON = new Icon(
//require(“./assets/images/loop_all_button.png”),
require(‘./assets/images/loop_all_button@3x.png’),
77,
35
);
const ICON_LOOP_ONE_BUTTON = new Icon(
//require(“./assets/images/loop_one_button.png”),
require(‘./assets/images/loop_one_button@3x.png’),
77,
35
);

const ICON_MUTED_BUTTON = new Icon(
//require(“./assets/images/muted_button.png”),
require(‘./assets/images/muted_button@3x.png’),
67,
58
);
const ICON_UNMUTED_BUTTON = new Icon(
//require(“./assets/images/unmuted_button.png”),
require(‘./assets/images/unmuted_button@3x.png’),
67,
58
);

//const ICON_TRACK_1 = new Icon(require(“./assets/images/track_1.png”), 166, 5);
//const ICON_THUMB_1 = new Icon(require(“./assets/images/thumb_1.png”), 18, 19);
//const ICON_THUMB_2 = new Icon(require(“./assets/images/thumb_2.png”), 15, 19);
const ICON_TRACK_1 = new Icon(
require(‘./assets/images/track_1@3x.png’),
166,
5
);
const ICON_THUMB_1 = new Icon(
require(‘./assets/images/thumb_1@3x.png’),
18,
19
);
const ICON_THUMB_2 = new Icon(
require(‘./assets/images/thumb_2@3x.png’),
15,
19
);

const LOOPING_TYPE_ALL = 0;
const LOOPING_TYPE_ONE = 1;
const LOOPING_TYPE_ICONS = { 0: ICON_LOOP_ALL_BUTTON, 1: ICON_LOOP_ONE_BUTTON };

const { width: DEVICE_WIDTH, height: DEVICE_HEIGHT } = Dimensions.get(‘window’);
const BACKGROUND_COLOR = ‘#FFF8ED’;
const DISABLED_OPACITY = 0.5;
const FONT_SIZE = 14;
const LOADING_STRING = ‘… loading …’;
const BUFFERING_STRING = ‘…buffering…’;
const RATE_SCALE = 3.0;
const VIDEO_CONTAINER_HEIGHT = (DEVICE_HEIGHT * 2.0) / 5.0 - FONT_SIZE * 2;

export default class App extends React.Component {
constructor(props) {
super(props);
this.index = 0;
this.isSeeking = false;
this.shouldPlayAtEndOfSeek = false;
this.playbackInstance = null;
this.state = {
showVideo: false,
playbackInstanceName: LOADING_STRING,
loopingType: LOOPING_TYPE_ALL,
muted: false,
playbackInstancePosition: null,
playbackInstanceDuration: null,
shouldPlay: false,
isPlaying: false,
isBuffering: false,
isLoading: true,
fontLoaded: false,
shouldCorrectPitch: true,
volume: 1.0,
rate: 1.0,
videoWidth: DEVICE_WIDTH,
videoHeight: VIDEO_CONTAINER_HEIGHT,
poster: false,
useNativeControls: false,
fullscreen: false,
throughEarpiece: false,
};
}

componentDidMount() {
Audio.setAudioModeAsync({
allowsRecordingIOS: false,
staysActiveInBackground: false,
interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
playsInSilentModeIOS: true,
shouldDuckAndroid: true,
interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX,
playThroughEarpieceAndroid: false,
});
(async () => {
await Font.loadAsync({
// …MaterialIcons.font,
// ‘cutive-mono-regular’: require(‘./assets/fonts/CutiveMono-Regular.ttf’),
});
this.setState({ fontLoaded: true });
})();
}

async _loadNewPlaybackInstance(playing) {
if (this.playbackInstance != null) {
await this.playbackInstance.unloadAsync();
// this.playbackInstance.setOnPlaybackStatusUpdate(null);
this.playbackInstance = null;
}

const source = { uri: PLAYLIST[this.index].uri };
const initialStatus = {
  shouldPlay: playing,
  rate: this.state.rate,
  shouldCorrectPitch: this.state.shouldCorrectPitch,
  volume: this.state.volume,
  isMuted: this.state.muted,
  isLooping: this.state.loopingType === LOOPING_TYPE_ONE,
  // // UNCOMMENT THIS TO TEST THE OLD androidImplementation:
  androidImplementation: 'MediaPlayer',
};

if (PLAYLIST[this.index].isVideo) {
  console.log(this._onPlaybackStatusUpdate);
  await this._video.loadAsync(source, initialStatus);
  // this._video.onPlaybackStatusUpdate(this._onPlaybackStatusUpdate);
  this.playbackInstance = this._video;
  const status = await this._video.getStatusAsync();
} else {
  const { sound, status } = await Audio.Sound.createAsync(
    source,
    initialStatus,
    this._onPlaybackStatusUpdate
  );
  this.playbackInstance = sound;
}

this._updateScreenForLoading(false);

}

_mountVideo = (component) => {
this._video = component;
this._loadNewPlaybackInstance(false);
};

_updateScreenForLoading(isLoading) {
if (isLoading) {
this.setState({
showVideo: false,
isPlaying: false,
playbackInstanceName: LOADING_STRING,
playbackInstanceDuration: null,
playbackInstancePosition: null,
isLoading: true,
});
} else {
this.setState({
playbackInstanceName: PLAYLIST[this.index].name,
showVideo: PLAYLIST[this.index].isVideo,
isLoading: false,
});
}
}

_onPlaybackStatusUpdate = (status) => {
if (status.isLoaded) {
this.setState({
playbackInstancePosition: status.positionMillis,
playbackInstanceDuration: status.durationMillis,
shouldPlay: status.shouldPlay,
isPlaying: status.isPlaying,
isBuffering: status.isBuffering,
rate: status.rate,
muted: status.isMuted,
volume: status.volume,
loopingType: status.isLooping ? LOOPING_TYPE_ONE : LOOPING_TYPE_ALL,
shouldCorrectPitch: status.shouldCorrectPitch,
});
if (status.didJustFinish && !status.isLooping) {
this._advanceIndex(true);
this._updatePlaybackInstanceForIndex(true);
}
} else {
if (status.error) {
console.log(FATAL PLAYER ERROR: ${status.error});
}
}
};

_onLoadStart = () => {
console.log(ON LOAD START);
};

_onLoad = (status) => {
console.log(ON LOAD : ${JSON.stringify(status)});
};

_onError = (error) => {
console.log(ON ERROR : ${error});
};

_onReadyForDisplay = (event) => {
const widestHeight =
(DEVICE_WIDTH * event.naturalSize.height) / event.naturalSize.width;
if (widestHeight > VIDEO_CONTAINER_HEIGHT) {
this.setState({
videoWidth:
(VIDEO_CONTAINER_HEIGHT * event.naturalSize.width) /
event.naturalSize.height,
videoHeight: VIDEO_CONTAINER_HEIGHT,
});
} else {
this.setState({
videoWidth: DEVICE_WIDTH,
videoHeight:
(DEVICE_WIDTH * event.naturalSize.height) / event.naturalSize.width,
});
}
};

_onFullscreenUpdate = (event) => {
console.log(
FULLSCREEN UPDATE : ${JSON.stringify(event.fullscreenUpdate)}
);
};

_advanceIndex(forward) {
this.index =
(this.index + (forward ? 1 : PLAYLIST.length - 1)) % PLAYLIST.length;
}

async _updatePlaybackInstanceForIndex(playing) {
this._updateScreenForLoading(true);

this.setState({
  videoWidth: DEVICE_WIDTH,
  videoHeight: VIDEO_CONTAINER_HEIGHT,
});

this._loadNewPlaybackInstance(playing);

}

_onPlayPausePressed = () => {
if (this.playbackInstance != null) {
if (this.state.isPlaying) {
this.playbackInstance.pauseAsync();
} else {
this.playbackInstance.playAsync();
}
}
};

_onStopPressed = () => {
if (this.playbackInstance != null) {
this.playbackInstance.stopAsync();
}
};

_onForwardPressed = () => {
if (this.playbackInstance != null) {
this._advanceIndex(true);
this._updatePlaybackInstanceForIndex(this.state.shouldPlay);
}
};

_onBackPressed = () => {
if (this.playbackInstance != null) {
this._advanceIndex(false);
this._updatePlaybackInstanceForIndex(this.state.shouldPlay);
}
};

_onMutePressed = () => {
if (this.playbackInstance != null) {
this.playbackInstance.setIsMutedAsync(!this.state.muted);
}
};

_onLoopPressed = () => {
if (this.playbackInstance != null) {
this.playbackInstance.setIsLoopingAsync(
this.state.loopingType !== LOOPING_TYPE_ONE
);
}
};

_onVolumeSliderValueChange = (value) => {
if (this.playbackInstance != null) {
this.playbackInstance.setVolumeAsync(value);
}
};

_trySetRate = async (rate, shouldCorrectPitch) => {
if (this.playbackInstance != null) {
try {
await this.playbackInstance.setRateAsync(rate, shouldCorrectPitch);
} catch (error) {
// Rate changing could not be performed, possibly because the client’s Android API is too old.
}
}
};

_onRateSliderSlidingComplete = async (value) => {
this._trySetRate(value * RATE_SCALE, this.state.shouldCorrectPitch);
};

_onPitchCorrectionPressed = async (value) => {
this._trySetRate(this.state.rate, !this.state.shouldCorrectPitch);
};

_onSeekSliderValueChange = (value) => {
if (this.playbackInstance != null && !this.isSeeking) {
this.isSeeking = true;
this.shouldPlayAtEndOfSeek = this.state.shouldPlay;
this.playbackInstance.pauseAsync();
}
};

_onSeekSliderSlidingComplete = async (value) => {
if (this.playbackInstance != null) {
this.isSeeking = false;
const seekPosition = value * this.state.playbackInstanceDuration;
if (this.shouldPlayAtEndOfSeek) {
this.playbackInstance.playFromPositionAsync(seekPosition);
} else {
this.playbackInstance.setPositionAsync(seekPosition);
}
}
};

_getSeekSliderPosition() {
if (
this.playbackInstance != null &&
this.state.playbackInstancePosition != null &&
this.state.playbackInstanceDuration != null
) {
return (
this.state.playbackInstancePosition /
this.state.playbackInstanceDuration
);
}
return 0;
}

_getMMSSFromMillis(millis) {
const totalSeconds = millis / 1000;
const seconds = Math.floor(totalSeconds % 60);
const minutes = Math.floor(totalSeconds / 60);

const padWithZero = (number) => {
  const string = number.toString();
  if (number < 10) {
    return '0' + string;
  }
  return string;
};
return padWithZero(minutes) + ':' + padWithZero(seconds);

}

_getTimestamp() {
if (
this.playbackInstance != null &&
this.state.playbackInstancePosition != null &&
this.state.playbackInstanceDuration != null
) {
return ${this._getMMSSFromMillis( this.state.playbackInstancePosition )} / ${this._getMMSSFromMillis(this.state.playbackInstanceDuration)};
}
return ‘’;
}

_onPosterPressed = () => {
this.setState({ poster: !this.state.poster });
};

_onUseNativeControlsPressed = () => {
this.setState({ useNativeControls: !this.state.useNativeControls });
};

_onFullscreenPressed = () => {
try {
this._video.presentFullscreenPlayer();
} catch (error) {
console.log(error.toString());
}
};

_onSpeakerPressed = () => {
this.setState(
(state) => {
return { throughEarpiece: !state.throughEarpiece };
},
({ throughEarpiece }) =>
Audio.setAudioModeAsync({
allowsRecordingIOS: false,
interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
playsInSilentModeIOS: true,
shouldDuckAndroid: true,
interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX,
playThroughEarpieceAndroid: throughEarpiece,
})
);
};

//
playFetchedDataHandler = async () => {
let { status } = await MediaLibrary.requestPermissionsAsync();

if (status === 'granted') {
  // alert('comes here');
  //let media = await MediaLibrary.getAssetsAsync({
  //	mediaType: [ 'audio' ],
  //	});
  //alert('comes here2');

  //let data = await MediaLibrary.getAssetInfoAsync(media.assets[0]);
  const data = await MediaLibrary.getAssetsAsync({
    // mediaType: MediaLibrary.MediaType.audio,
    first: 500,
    sortBy: MediaLibrary.SortBy.creationTime,
    mediaType: ['audio'],
  });
  // console.log(media);
  // setPath((path) => data.uri); // setting data.uri as path doesn't work
  //PlayPauseHandler();

  const strdata = JSON.stringify(data, null, 2);
  let data2 = await MediaLibrary.getAssetInfoAsync(data.assets[2]);
  const strdata2 = JSON.stringify(data2, null, 2);

  const strdata4 = JSON.stringify(data.assets, null, 2);
  //  alert(strdata4);

  data.assets.forEach((item) => {
    PLAYLIST.push({ name: item.filename, uri: item.uri, isVideo: false });
  });

  // PLAYLIST.push({name :'test', uri:'filename',isVideo:'jsuchking'});

  const strdataeditod = JSON.stringify(PLAYLIST, null, 2);
  alert(strdataeditod);

  //  audioBookPlaylist.push({num : 3, app:'helloagain_again',message:'yet another message'});
  // const strdata3= JSON.stringify(audioBookPlaylist,null, 3);
  // alert(strdata3);
  //console.log(data.uri);
}

};

render() {
return !this.state.fontLoaded ? (

) : (

<Text style={[styles.text, { fontFamily: ‘’ }]}>
{this.state.playbackInstanceName}

    <View style={styles.videoContainer}>
	
      <Video
        ref={this._mountVideo}
        style={[
          styles.video,
          {
            opacity: this.state.showVideo ? 1.0 : 0.0,
            width: this.state.videoWidth,
            height: this.state.videoHeight,
          },
        ]}
        resizeMode={Video.RESIZE_MODE_CONTAIN}
        onPlaybackStatusUpdate={this._onPlaybackStatusUpdate}
        onLoadStart={this._onLoadStart}
        onLoad={this._onLoad}
        onError={this._onError}
        onFullscreenUpdate={this._onFullscreenUpdate}
        onReadyForDisplay={this._onReadyForDisplay}
        useNativeControls={this.state.useNativeControls}
      />
    </View>
    <View
      style={[
        styles.playbackContainer,
        {
          opacity: this.state.isLoading ? DISABLED_OPACITY : 1.0,
        },
      ]}>
      <Slider
        style={styles.playbackSlider}
        trackImage={ICON_TRACK_1.module}
        thumbImage={ICON_THUMB_1.module}
        value={this._getSeekSliderPosition()}
        onValueChange={this._onSeekSliderValueChange}
        onSlidingComplete={this._onSeekSliderSlidingComplete}
        disabled={this.state.isLoading}
      />
      <View style={styles.timestampRow}>
        <Text
          style={[
            styles.text,
            styles.buffering,
            { fontFamily: '' },
          ]}>
          {this.state.isBuffering ? BUFFERING_STRING : ''}
        </Text>
        <Text
          style={[
            styles.text,
            styles.timestamp,
            { fontFamily: '' },
          ]}>
          {this._getTimestamp()}
        </Text>
      </View>
    </View>
    <View
      style={[
        styles.buttonsContainerBase,
        styles.buttonsContainerTopRow,
        {
          opacity: this.state.isLoading ? DISABLED_OPACITY : 1.0,
        },
      ]}>
      <TouchableHighlight
        underlayColor={BACKGROUND_COLOR}
        style={styles.wrapper}
        onPress={this._onBackPressed}
        disabled={this.state.isLoading}>
        <Image style={styles.button} source={ICON_BACK_BUTTON.module} />
      </TouchableHighlight>
      <TouchableHighlight
        underlayColor={BACKGROUND_COLOR}
        style={styles.wrapper}
        onPress={this._onPlayPausePressed}
        disabled={this.state.isLoading}>
        <Image
          style={styles.button}
          source={
            this.state.isPlaying
              ? ICON_PAUSE_BUTTON.module
              : ICON_PLAY_BUTTON.module
          }
        />
      </TouchableHighlight>
      <TouchableHighlight
        underlayColor={BACKGROUND_COLOR}
        style={styles.wrapper}
        onPress={this._onStopPressed}
        disabled={this.state.isLoading}>
        <Image style={styles.button} source={ICON_STOP_BUTTON.module} />
      </TouchableHighlight>
      <TouchableHighlight
        underlayColor={BACKGROUND_COLOR}
        style={styles.wrapper}
        onPress={this._onForwardPressed}
        disabled={this.state.isLoading}>
        <Image style={styles.button} source={ICON_FORWARD_BUTTON.module} />
      </TouchableHighlight>
    </View>
    <View
      style={[
        styles.buttonsContainerBase,
        styles.buttonsContainerMiddleRow,
      ]}>
      <View style={styles.volumeContainer}>
        <TouchableHighlight
          underlayColor={BACKGROUND_COLOR}
          style={styles.wrapper}
          onPress={this._onMutePressed}>
          <Image
            style={styles.button}
            source={
              this.state.muted
                ? ICON_MUTED_BUTTON.module
                : ICON_UNMUTED_BUTTON.module
            }
          />
        </TouchableHighlight>
        <Slider
          style={styles.volumeSlider}
          trackImage={ICON_TRACK_1.module}
          thumbImage={ICON_THUMB_2.module}
          value={1}
          onValueChange={this._onVolumeSliderValueChange}
        />
      </View>
      <TouchableHighlight
        underlayColor={BACKGROUND_COLOR}
        style={styles.wrapper}
        onPress={this._onLoopPressed}>
        <Image
          style={styles.button}
          source={LOOPING_TYPE_ICONS[this.state.loopingType].module}
        />
      </TouchableHighlight>
    </View>
    <View
      style={[
        styles.buttonsContainerBase,
        styles.buttonsContainerBottomRow,
      ]}>
      <TouchableHighlight
        underlayColor={BACKGROUND_COLOR}
        style={styles.wrapper}
        onPress={() =>
          this._trySetRate(1.0, this.state.shouldCorrectPitch)
        }>
        <View style={styles.button}>
          <Text
            style={[styles.text, { fontFamily: '' }]}>
            Rate:
          </Text>
        </View>
      </TouchableHighlight>
      <Slider
        style={styles.rateSlider}
        trackImage={ICON_TRACK_1.module}
        thumbImage={ICON_THUMB_1.module}
        value={this.state.rate / RATE_SCALE}
        onSlidingComplete={this._onRateSliderSlidingComplete}
      />
      <TouchableHighlight
        underlayColor={BACKGROUND_COLOR}
        style={styles.wrapper}
        onPress={this._onPitchCorrectionPressed}>
        <View style={styles.button}>
          <Text
            style={[styles.text, { fontFamily: '' }]}>
            PC: {this.state.shouldCorrectPitch ? 'yes' : 'no'}
          </Text>
        </View>
      </TouchableHighlight>
      <TouchableHighlight
        onPress={this._onSpeakerPressed}
        underlayColor={BACKGROUND_COLOR}>
        <MaterialIcons
          name={
            this.state.throughEarpiece
              ? ICON_THROUGH_EARPIECE
              : ICON_THROUGH_SPEAKER
          }
          size={32}
          color="black"
        />
      </TouchableHighlight>
    </View>
    <View />
    {this.state.showVideo ? (
      <View>
        <View
          style={[
            styles.buttonsContainerBase,
            styles.buttonsContainerTextRow,
          ]}>
          <View />
          <TouchableHighlight
            underlayColor={BACKGROUND_COLOR}
            style={styles.wrapper}
            onPress={this._onPosterPressed}>
            <View style={styles.button}>
              <Text
                style={[
                  styles.text,
                  { fontFamily: 'cutive-mono-regular' },
                ]}>
                Poster: {this.state.poster ? 'yes' : 'no'}
              </Text>
            </View>
          </TouchableHighlight>
          <View />
          <TouchableHighlight
            underlayColor={BACKGROUND_COLOR}
            style={styles.wrapper}
            onPress={this._onFullscreenPressed}>
            <View style={styles.button}>
              <Text
                style={[
                  styles.text,
                  { fontFamily: '' },
                ]}>
                Fullscreen
              </Text>
            </View>
          </TouchableHighlight>
          <View />
        </View>
        <View style={styles.space} />
        <View
          style={[
            styles.buttonsContainerBase,
            styles.buttonsContainerTextRow,
          ]}>
          <View />
          <TouchableHighlight
            underlayColor={BACKGROUND_COLOR}
            style={styles.wrapper}
            onPress={this._onUseNativeControlsPressed}>
            <View style={styles.button}>
              <Text
                style={[
                  styles.text,
                  { fontFamily: '' },
                ]}>
                Native Controls:{' '}
                {this.state.useNativeControls ? 'yes' : 'no'}
              </Text>
            </View>
          </TouchableHighlight>
          <View />
        </View>
      </View>
    ) : null}
    <Button onPress={this.playFetchedDataHandler} title="proo" />
  </View>
);

}
}

const styles = StyleSheet.create({
emptyContainer: {
alignSelf: ‘stretch’,
backgroundColor: BACKGROUND_COLOR,
},
container: {
flex: 1,
flexDirection: ‘column’,
justifyContent: ‘space-between’,
alignItems: ‘center’,
alignSelf: ‘stretch’,
backgroundColor: BACKGROUND_COLOR,
},
wrapper: {},
nameContainer: {
height: FONT_SIZE,
},
space: {
height: FONT_SIZE,
},
videoContainer: {
height: VIDEO_CONTAINER_HEIGHT,
},
video: {
maxWidth: DEVICE_WIDTH,
},
playbackContainer: {
flex: 1,
flexDirection: ‘column’,
justifyContent: ‘space-between’,
alignItems: ‘center’,
alignSelf: ‘stretch’,
minHeight: ICON_THUMB_1.height * 2.0,
maxHeight: ICON_THUMB_1.height * 2.0,
},
playbackSlider: {
alignSelf: ‘stretch’,
},
timestampRow: {
flex: 1,
flexDirection: ‘row’,
alignItems: ‘center’,
justifyContent: ‘space-between’,
alignSelf: ‘stretch’,
minHeight: FONT_SIZE,
},
text: {
fontSize: FONT_SIZE,
minHeight: FONT_SIZE,
},
buffering: {
textAlign: ‘left’,
paddingLeft: 20,
},
timestamp: {
textAlign: ‘right’,
paddingRight: 20,
},
button: {
backgroundColor: BACKGROUND_COLOR,
},
buttonsContainerBase: {
flex: 1,
flexDirection: ‘row’,
alignItems: ‘center’,
justifyContent: ‘space-between’,
},
buttonsContainerTopRow: {
maxHeight: ICON_PLAY_BUTTON.height,
minWidth: DEVICE_WIDTH / 2.0,
maxWidth: DEVICE_WIDTH / 2.0,
},
buttonsContainerMiddleRow: {
maxHeight: ICON_MUTED_BUTTON.height,
alignSelf: ‘stretch’,
paddingRight: 20,
},
volumeContainer: {
flex: 1,
flexDirection: ‘row’,
alignItems: ‘center’,
justifyContent: ‘space-between’,
minWidth: DEVICE_WIDTH / 2.0,
maxWidth: DEVICE_WIDTH / 2.0,
},
volumeSlider: {
width: DEVICE_WIDTH / 2.0 - ICON_MUTED_BUTTON.width,
},
buttonsContainerBottomRow: {
maxHeight: ICON_THUMB_1.height,
alignSelf: ‘stretch’,
paddingRight: 20,
paddingLeft: 20,
},
rateSlider: {
width: DEVICE_WIDTH / 2.0,
},
buttonsContainerTextRow: {
maxHeight: FONT_SIZE,
alignItems: ‘center’,
paddingRight: 20,
paddingLeft: 20,
minWidth: DEVICE_WIDTH,
maxWidth: DEVICE_WIDTH,
},
});

system · November 21, 2020, 2:43pm

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Check the render method of `DevLoadingView`. Expo SDK	5	1402	April 14, 2021
expo-app-loading 1.1.3 crashes the app Expo SDK apploading	2	512	September 30, 2021
Element type is invalid after updating to expo expo SDK 39 Expo SDK	4	541	January 9, 2021
Errors when upgrading to Expo SDK v18.0.0 Expo SDK	1	517	June 28, 2017
Element type is invalid: expected a string (for built-in components) or a class/function Expo Application Services (EAS)	1	217	September 22, 2022

Eelement type is invalid

Related Topics