Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Native - base64 image

$
0
0

I'm trying to display an image that's been recorded to base64. I can console log and confirm the image is working. But I am not quite sure how to display it from the API request.

I'm completely new to typescript & coding in general, so just trying to get a further understanding, been stuck on this little problem for a little while.

const graphClient = Client.initWithMiddleware(clientOptions);export class GraphManager {  static getPhoto = async () => {    return await graphClient        .api('/me/photo/$value')        .get()        // display image         .then(res => {          const reader = new FileReader();          reader.readAsDataURL(res);          reader.onloadend = () => {          // return base64 image            return reader.result          };        })  };

Then on my main component

    const userPhoto = GraphManager.getPhoto()    const HomeComponent = () => {    const userContext = React.useContext(UserContext);    return (<View style={styles.container}><ActivityIndicator          color={Platform.OS === 'android' ? '#276b80' : undefined}          animating={userContext.userLoading}          size='large'        />        {userContext.userLoading ? null : (<Image style={{ width: 200, height: 200 }} source={{ uri:`${UserPhoto}`}}/>        )}</View>    );  };

I am able to get the image to show, if I put the base64 data in another file and export it as a const. But that's as far as I've gotten. I am new to classes/methods.


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>