react-native#LogBox TypeScript Examples
The following examples show how to use
react-native#LogBox.
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: App.tsx From protect-scotland with Apache License 2.0 | 5 votes |
|
// This hides a warning from react-native-easy-markdown which is still using componentWillReceiveProps in its latest version
LogBox.ignoreLogs([
'Warning: componentWillReceiveProps has been renamed, and is not recommended for use.'
]);
Example #2
| Source File: filterWarnings.ts From sellflow with MIT License | 5 votes |
|
LogBox.ignoreLogs([
'Warning: componentWillMount has been renamed',
'Warning: componentWillReceiveProps has been renamed',
'Warning: "RootErrorBoundary',
]);
Example #3
| Source File: App.ts From beancount-mobile with MIT License | 5 votes |
|
LogBox.ignoreLogs([
"Non-serializable values were found in the navigation state",
]);
Example #4
| Source File: App.tsx From Rapid-Application-Development-with-AWS-Amplify with MIT License | 4 votes |
|
App = () => {
LogBox.ignoreAllLogs();
const defaultPostState = {id: '', title: '', content: '', image: ''};
// Post
const [postState, setPostState] = useState(defaultPostState);
const [posts, setPosts] = useState([]);
// Create post section
const [createSectionState, setCreateSectionState] = useState(true);
// Update post section
const [updateSectionState, setUpdateSectionState] = useState(false);
//image upload
const [img, setImg] = useState('');
const urlToBlob = async (url:string) => {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.onerror = reject;
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) resolve(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
})
}
const onImageUploadChange = async ():Promise<void> => {
try {
const options: ImageLibraryOptions = {
mediaType: 'photo',
quality: 0.1,
maxWidth: 400,
maxHeight: 300
};
launchImageLibrary(options, async (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.errorCode) {
console.log('ImagePicker Error: ', response.errorMessage);
} else {
// You can also display the image using data:
// const source = { uri: 'data:image/jpeg;base64,' + response.data };
setImg(response.uri as string);
if (response.uri as string) {
const file: any = response.uri;
const fileName: any = file.replace(/^.*[\\\/]/, '');
const contentType: any = fileName.split('.').pop().toLowerCase();
setInput("image", fileName);
const responseData = await urlToBlob(file);
Storage.put(fileName, responseData, {
contentType: 'image/' + contentType,
})
.then(async (result: any) => {
console.log('result.key', result.key);
setImg((await Storage.get(result.key)) as string);
console.log('onImageUploadChange result:', result);
//setInput('image', img);
})
.catch((err) => console.error(err));
}
console.log('onImageUploadChange img:', img);
}
});
} catch (err) {
console.error('onImageUploadChange err:', err);
}
};
useEffect(():void => {
fetchPosts();
}, []);
const fetchPosts = async (): Promise<void> => {
try {
console.log('fetching posts');
const postData: any = await API.graphql(
graphqlOperation(queries.listPosts),
);
const posts: any = postData.data.listPosts.items;
setPosts(posts);
} catch (err) {
console.log('error fetching posts: ', err);
}
};
const createSubscription: any = API.graphql(
graphqlOperation(subscriptions.onCreatePost),
);
createSubscription.subscribe({
next: (postData: any) => {
console.log('onCreatePost', postData);
fetchPosts();
},
});
const updateSubscription: any = API.graphql(
graphqlOperation(subscriptions.onUpdatePost),
);
updateSubscription.subscribe({
next: (postData: any) => {
console.log('onUpdatePost', postData);
fetchPosts();
},
});
const deleteSubscription: any = API.graphql(
graphqlOperation(subscriptions.onDeletePost),
);
deleteSubscription.subscribe({
next: (postData: any) => {
console.log('onDeletePost', postData);
fetchPosts();
},
});
const setInput = (key: any, value: any): any => {
setPostState({...postState, [key]: value});
};
const createPost = async (): Promise<any> => {
try {
if (!postState.title || !postState.content) return;
const post = {...postState};
console.log('creating post', post);
const result = await API.graphql(
graphqlOperation(mutations.createPost, {
input: {
title: post.title,
content: post.content,
image: post.image,
},
}),
);
setPosts([...posts, post] as SetStateAction<never[]>);
setPostState(defaultPostState);
console.log('created post', result);
} catch (err: any) {
console.log('error creating post:', err);
}
};
const updatePost = async (): Promise<any> => {
try {
if (!postState.title || !postState.content) return;
const post = {...postState};
console.log('updating post', post);
const result = await API.graphql(
graphqlOperation(mutations.updatePost, {
input: {
id: post.id,
title: post.title,
content: post.content,
image: post.image,
},
}),
);
setUpdateSectionState(false);
setCreateSectionState(true);
console.log('updated post', result);
setPostState(defaultPostState);
} catch (err: any) {
console.log('error updating post:', err);
}
};
const deletePost = async (postID: string): Promise<any> => {
try {
if (!postID) return;
console.log('deleting post', postID);
const result = await API.graphql(
graphqlOperation(mutations.deletePost, {
input: {
id: postID,
},
}),
);
console.log('deleted post', result);
} catch (err: any) {
console.log('error deleting post:', err);
}
};
const findPosts = async (title: string): Promise<any> => {
try {
console.log('finding posts:', title);
const postData: any = await API.graphql(
graphqlOperation(queries.listPosts, {
filter: {
title: {
contains: title,
},
},
}),
);
console.log('found posts:');
const posts: any = postData.data.listPosts.items;
setPosts(posts);
} catch (err) {
console.log('error finding posts ', err);
}
};
return (
<SafeAreaView style={styles.safeArea}>
<View style={styles.container}>
<TextInput
onChangeText={(val) => findPosts(val)}
style={styles.input}
placeholder="Search"
/>
{createSectionState ? (
<View>
<Text style={styles.title}>Create Post</Text>
<View>
<Text
style={styles.button}
onPress={() => {
onImageUploadChange();
}}>
Pick an image from camera roll
</Text>
{img ? (
<Image source={{uri: img}} style={{width: 320, height: 200}} />
) : null}
</View>
<TextInput
onChangeText={(val) => setInput('title', val)}
style={styles.input}
value={postState.title}
placeholder="Title"
/>
<TextInput
onChangeText={(val) => setInput('content', val)}
style={styles.textArea}
value={postState.content}
placeholder="Content"
/>
<Text style={styles.button} onPress={createPost}>
Create Post
</Text>
</View>
) : null}
{updateSectionState ? (
<View>
<Text style={styles.title}>Update Post</Text>
<TextInput
onChangeText={(val) => setInput('title', val)}
style={styles.input}
value={postState.title}
placeholder="Title"
/>
<TextInput
onChangeText={(val) => setInput('content', val)}
style={styles.textArea}
value={postState.content}
placeholder="Content"
/>
<Text style={styles.button} onPress={updatePost}>
Update Post
</Text>
</View>
) : null}
<ScrollView style={styles.scrollView}>
{posts.map((post: any, index: any) => (
<View key={post.id ? post.id : index} style={styles.post}>
<S3Image style={styles.postImage} level="public" imgKey={post.image} />
<Text style={styles.postTitle}>{post.title} {post.image}</Text>
<Text style={styles.postContent}>{post.content}</Text>
<View style={{flexDirection: 'row'}}>
<Text
style={styles.postUpdate}
onPress={() => {
setPostState(post);
setUpdateSectionState(true);
setCreateSectionState(false);
}}>
Update
</Text>
<Text
style={styles.postDelete}
onPress={() => {
deletePost(post.id);
}}>
Delete
</Text>
</View>
</View>
))}
</ScrollView>
</View>
</SafeAreaView>
);
}
Example #5
| Source File: App.tsx From Rapid-Application-Development-with-AWS-Amplify with MIT License | 4 votes |
|
App = () => {
LogBox.ignoreAllLogs();
const defaultPostState = {id: '', title: '', content: '', image: ''};
// Post
const [postState, setPostState] = useState(defaultPostState);
const [posts, setPosts] = useState([]);
// Create post section
const [createSectionState, setCreateSectionState] = useState(true);
// Update post section
const [updateSectionState, setUpdateSectionState] = useState(false);
//image upload
const [img, setImg] = useState('');
const urlToBlob = async (url:string) => {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.onerror = reject;
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) resolve(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
})
}
const onImageUploadChange = async ():Promise<void> => {
try {
const options: ImageLibraryOptions = {
mediaType: 'photo',
quality: 0.1,
maxWidth: 400,
maxHeight: 300
};
launchImageLibrary(options, async (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.errorCode) {
console.log('ImagePicker Error: ', response.errorMessage);
} else {
// You can also display the image using data:
// const source = { uri: 'data:image/jpeg;base64,' + response.data };
setImg(response.uri as string);
if (response.uri as string) {
const file: any = response.uri;
const fileName: any = file.replace(/^.*[\\\/]/, '');
const contentType: any = fileName.split('.').pop().toLowerCase();
setInput("image", fileName);
const responseData = await urlToBlob(file);
Storage.put(fileName, responseData, {
contentType: 'image/' + contentType,
})
.then(async (result: any) => {
console.log('result.key', result.key);
setImg((await Storage.get(result.key)) as string);
console.log('onImageUploadChange result:', result);
//setInput('image', img);
})
.catch((err) => console.error(err));
}
console.log('onImageUploadChange img:', img);
}
});
} catch (err) {
console.error('onImageUploadChange err:', err);
}
};
useEffect(():void => {
fetchPosts();
}, []);
const fetchPosts = async (): Promise<void> => {
try {
console.log('fetching posts');
const postData: any = await API.graphql(
graphqlOperation(queries.listPosts),
);
const posts: any = postData.data.listPosts.items;
setPosts(posts);
} catch (err) {
console.log('error fetching posts: ', err);
}
};
const createSubscription: any = API.graphql(
graphqlOperation(subscriptions.onCreatePost),
);
createSubscription.subscribe({
next: (postData: any) => {
console.log('onCreatePost', postData);
fetchPosts();
},
});
const updateSubscription: any = API.graphql(
graphqlOperation(subscriptions.onUpdatePost),
);
updateSubscription.subscribe({
next: (postData: any) => {
console.log('onUpdatePost', postData);
fetchPosts();
},
});
const deleteSubscription: any = API.graphql(
graphqlOperation(subscriptions.onDeletePost),
);
deleteSubscription.subscribe({
next: (postData: any) => {
console.log('onDeletePost', postData);
fetchPosts();
},
});
const setInput = (key: any, value: any): any => {
setPostState({...postState, [key]: value});
};
const createPost = async (): Promise<any> => {
try {
if (!postState.title || !postState.content) return;
const post = {...postState};
console.log('creating post', post);
const result = await API.graphql(
graphqlOperation(mutations.createPost, {
input: {
title: post.title,
content: post.content,
image: post.image,
},
}),
);
setPosts([...posts, post] as SetStateAction<never[]>);
setPostState(defaultPostState);
console.log('created post', result);
} catch (err: any) {
console.log('error creating post:', err);
}
};
const updatePost = async (): Promise<any> => {
try {
if (!postState.title || !postState.content) return;
const post = {...postState};
console.log('updating post', post);
const result = await API.graphql(
graphqlOperation(mutations.updatePost, {
input: {
id: post.id,
title: post.title,
content: post.content,
image: post.image,
},
}),
);
setUpdateSectionState(false);
setCreateSectionState(true);
console.log('updated post', result);
setPostState(defaultPostState);
} catch (err: any) {
console.log('error updating post:', err);
}
};
const deletePost = async (postID: string): Promise<any> => {
try {
if (!postID) return;
console.log('deleting post', postID);
const result = await API.graphql(
graphqlOperation(mutations.deletePost, {
input: {
id: postID,
},
}),
);
console.log('deleted post', result);
} catch (err: any) {
console.log('error deleting post:', err);
}
};
const findPosts = async (title: string): Promise<any> => {
try {
console.log('finding posts:', title);
const postData: any = await API.graphql(
graphqlOperation(queries.listPosts, {
filter: {
title: {
contains: title,
},
},
}),
);
console.log('found posts:');
const posts: any = postData.data.listPosts.items;
setPosts(posts);
} catch (err) {
console.log('error finding posts ', err);
}
};
return (
<SafeAreaView style={styles.safeArea}>
<View style={styles.container}>
<TextInput
onChangeText={(val) => findPosts(val)}
style={styles.input}
placeholder="Search"
/>
{createSectionState ? (
<View>
<Text style={styles.title}>Create Post</Text>
<View>
<Text
style={styles.button}
onPress={() => {
onImageUploadChange();
}}>
Pick an image from camera roll
</Text>
{img ? (
<Image source={{uri: img}} style={{width: 320, height: 200}} />
) : null}
</View>
<TextInput
onChangeText={(val) => setInput('title', val)}
style={styles.input}
value={postState.title}
placeholder="Title"
/>
<TextInput
onChangeText={(val) => setInput('content', val)}
style={styles.textArea}
value={postState.content}
placeholder="Content"
/>
<Text style={styles.button} onPress={createPost}>
Create Post
</Text>
</View>
) : null}
{updateSectionState ? (
<View>
<Text style={styles.title}>Update Post</Text>
<TextInput
onChangeText={(val) => setInput('title', val)}
style={styles.input}
value={postState.title}
placeholder="Title"
/>
<TextInput
onChangeText={(val) => setInput('content', val)}
style={styles.textArea}
value={postState.content}
placeholder="Content"
/>
<Text style={styles.button} onPress={updatePost}>
Update Post
</Text>
</View>
) : null}
<ScrollView style={styles.scrollView}>
{posts.map((post: any, index: any) => (
<View key={post.id ? post.id : index} style={styles.post}>
<S3Image style={styles.postImage} level="public" imgKey={post.image} />
<Text style={styles.postTitle}>{post.title} {post.image}</Text>
<Text style={styles.postContent}>{post.content}</Text>
<View style={{flexDirection: 'row'}}>
<Text
style={styles.postUpdate}
onPress={() => {
setPostState(post);
setUpdateSectionState(true);
setCreateSectionState(false);
}}>
Update
</Text>
<Text
style={styles.postDelete}
onPress={() => {
deletePost(post.id);
}}>
Delete
</Text>
</View>
</View>
))}
</ScrollView>
</View>
</SafeAreaView>
);
}
