I have set up react-native-share with RN .68.1 and the latest of react-native-share, and everything works great except for the app icon is not showing. The documentation doesn't really explain it very well.
My share code:
const handleShare = (title: string, url: string) => {
const parsedTitle = HtmlTextParser(title);
const shareOptions = Platform.select({
ios: {
title: parsedTitle ?? '',
message: parsedTitle,
url: `https://testUrl.com${url}`,
},
default: {
title: parsedTitle ?? '',
message: parsedTitle,
url: `https://testUrl.com${url}`,
},
});
try {
const share = Share.open({...shareOptions, failOnCancel: false});
} catch (e) {
console.log('error: ', e);
}
};
Can I set a custom icon here easily? Is there a working example somewhere that I can consult to make this happen?
Related
I am starting to learn React Native and using Supabase with React is pretty different than using it with Flutter. Right now, I have gotten email sign-in/up working and listening for auth changes to switch navigation stacks. I believe my two issues are related because the user/session might not be getting saved when updated.
The first issue is that every time the app is opened, the sign-in screen is shown, even though I signed in before closing it. I tried to set som options, including localStorage but that did not help. Below is my supabaseClient.tsx file.
const options = {
auth: {
localStorage: AsyncStorage as any,
autoRefreshToken: true,
persistSession: true,
detectSessionInUrl: true,
},
};
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, options);
export { supabase };
The second issue is that I am trying something simple, just showing the displayName that the signed-in user has set on the HomeScreen, but the getUser() and the user from getSession() both return null so I cannot get the user.id. This causes the displayName to be undefined and a blank screen. Below is the code I am using to get the displayName.
export function HomeScreen() {
const [displayName, setDisplayName] = useState();
useEffect(() => {
(async () => {
const user = (await supabase.auth.getSession()).data.session?.user;
console.log("User: " + user);
const { data, error } = await supabase
.from("profiles")
.select()
.eq("uid", user?.id);
if (error === null) {
data!.map((data) => {
const name = data.displayName;
console.log(name);
setDisplayName(name);
});
} else {
console.log(error.message);
}
console.log("Name: " + displayName);
})();
}, [setDisplayName]);
return (
<View>
<Text>{displayName}</Text>
</View>
);
}
I had defined localStorage as any because of a tutorial I saw.
I needed to change this:
const options = {
auth: {
localStorage: AsyncStorage as any,
autoRefreshToken: true,
persistSession: true,
detectSessionInUrl: true,
},
};
to this:
const options = {
auth: {
localStorage: AsyncStorage,
autoRefreshToken: true,
persistSession: true,
detectSessionInUrl: true,
},
};
I'm having a problem using #react-native-community/cameraroll.
Here's my code:
const handleSaveImageToDevice = async () => {
try {
const uri = await captureRef(viewRef, {
format: 'jpg',
quality: 0.8,
});
const image = CameraRoll.save(uri, {
type: 'photo',
album: 'Generated Image',
});
} catch (e) {
return e;
}
};
As seen in the code I used captureRef to save react elements with ref as image.
The behavior is working as expected. If the user clicks the save button the image will be saved to the designated folder. But the problem is it saves random file name. I want to rename it like for example "generated_image".
When you are capturing there is option for image file name:
const uri = await captureRef(viewRef, {
format: 'jpg',
quality: 0.8,
fileName: 'generated_image'
});
Refer below link:
https://github.com/gre/react-native-view-shot/issues/116#issuecomment-1155523609
I forgot to update this but I already found a way to fix my problem using third party library react-native-fs
viewShot?.current?.capture().then((data) => {
RNFS.writeFile(
RNFS.CachesDirectoryPath +
`/generated-image.jpg`,
data,
'base64',
).then((success) => {
return CameraRoll.save(
RNFS.CachesDirectoryPath +
`/generated-image.jpg`,
{
type: 'photo',
album: 'testing',
},
);
});
});
I need to open the user feedback window in my simulator using #sentry/react-native.
I have tired by adding the Sentry.showReportDialog() in my App.js.
But it not worked and I got an undefined error.
Can anyone suggest what is the best practice to open the user feedback window in #sentry/react-native?
I think feedback windows is only for browsers as you can read in this thread
https://github.com/getsentry/sentry-react-native/issues/500 as an option you can put it via feedback API and make your own global modal/alert
Sentry.init({
dsn: 'key',
beforeSend(event, hint) {
// Check if it is an exception, and if so, show the report dialog
if (event.exception) {
Sentry.showReportDialog({ eventId: event.event_id });
}
return event;
}
});
Example of sentry api feedback
let endpoint = 'https://sentry.io/api/0/projects/{your_organization_slug}/{your_project_slug}/user-feedback/'
let params = {
event_id: ...,
name: 'John Smith',
email: 'johnsmith#example.com',
comments: 'This app sucks'
}
try {
await fetch(endpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(params)
})
console.log('Feedback submitted!')
} catch (error) {
console.error(error)
}
Sentry.showReportDialog() exists only in the browser sdk
To send user feedback in the React Native SDK use Sentry.captureUserFeedback(userFeedback) details are in the Sentry docs.
import * as Sentry from '#sentry/react-native';
import { UserFeedback } from '#sentry/react-native';
const sentryId = Sentry.captureMessage('My Message');
// OR: const sentryId = Sentry.lastEventId();
const userFeedback: UserFeedback = {
event_id: sentryId,
name: 'John Doe',
email: 'john#doe.com',
comments: 'Hello World!',
};
Sentry.captureUserFeedback(userFeedback);
To see how to create a popup User Feedback form check the sample app implementation.
I am trying to learn react native and how to download files to the device. I know you can do this with react native file system but that does not support authentication which I need. React native fetch blob does support this.
For education purposes, I want to have the code from the first answer to this question recreated in react native fetch blob instead of react native file system.
I someone could write sutch an examlple form me I would be super tankfull.
Question: Downloading data files with React Native for offline use
Try this, it's work fine on Android:
export const download = (url, name) => {
const { config, fs } = RNFetchBlob;
let PictureDir = fs.dirs.PictureDir;
let options = {
fileCache: true,
addAndroidDownloads: {
useDownloadManager: true,
notification: true,
path: PictureDir + name,
description: t('downloading_file')
}
};
config(options)
.fetch('GET', url)
.then(res => {
if (res.data) {
alert(t('download_success'));
} else {
alert(t('download_failed'));
}
});
};
downloadImage(){
var date = new Date();
var url = "http://debasish.com/image.jpg";
var ext = this.getExtention(url);
ext = "."+ext[0];
const { config, fs } = RNFetchBlob ;
let PictureDir = fs.dirs.PictureDir
let options = {
fileCache: true,
addAndroidDownloads : {
useDownloadManager : true,
notification : true,
path: PictureDir + "/image_"+Math.floor(date.getTime()
+ date.getSeconds() / 2)+ext,
description : 'Image'
}
}
config(options).fetch('GET', url).then((res) => {
Alert.alert("Download Success !");
});
}
getExtention(filename){
return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) :
undefined;
}
So I am trying to use react-native-fbsdk FBAppInviteDialog to show invitation dialog but I always get this error
I was trying to use this code from Sending App Invites in a React Native app
here is my code
constructor (props) {
super(props)
this.state = {
appInviteContent: {
applinkUrl: 'https://facebook.com'
}
}
}
_onPress = () => {
var tmp = this
AppInviteDialog.canShow(this.state.appInviteContent).then(
function (canShow) {
if (canShow) {
return AppInviteDialog.show(tmp.state.appInviteContent)
}
}
).then(
function (result) {
if (result.isCancelled) {
Alert.alert('Share cancelled')
} else {
Alert.alert('Share success with postId: ' + result.postId)
}
},
function (error) {
Alert.alert('Share fail with error: ' + error)
}
)
}
If you want that the showDialog works you must first as the example show something like this:
appInviteContent= {
contentType: 'link',
contentUrl: Platform.select({ ios: 'https://iossomething.com',
android: 'https://androidsomething.com'}),
contentDescription: 'Check the website!',
};
Also as I see there in the code you are using the flow language.
Check that.