Does anyone know of a good library to use to collect a signature in Expo in both iOS and Android?
I've googled the heck out of it and tried half a dozen libraries but none seem to work well with Expo.
The closest one I've come across is https://github.com/brentvatne/signature-example but that works well on its own, but then has a bunch of issues when I bring it into my project.
I use react-native-signature-pad and it works great for me. Here's the link :
https://github.com/kevinstumpf/react-native-signature-pad
Example :
import SignaturePad from "react-native-signature-pad";
_signaturePadError = (error) => {
console.log("Error", error);
};
_signaturePadChange = ({ base64DataUrl }) => {
this.setState({ signature: base64DataUrl });
};
<SignaturePad
onError={this._signaturePadError}
onChange={this._signaturePadChange}
dotSize={2}
style={{
flex: 1,
backgroundColor: "white",
}}
/>```
Related
expo-intent-launcher is working fine for Android but not working on ios for expo, and native packages are not installing on expo environment. Is there any solution? Thanks in Advance.
const openFile = (uri, mimeType) => {
FileSystem.getContentUriAsync(uri).then(cUri => {
IntentLauncher.startActivityAsync('android.intent.action.VIEW', {
data: cUri,
flags: 1,
type: mimeType
}).catch(e => {
console.log("Error", e);
alert('No Viewer Found for the file');
})
})
}
The plugin expo-intent-launcher which you are using is currently no equivalent to the iOS platform.
Please read the document carefully.
https://docs.expo.dev/versions/latest/sdk/intent-launcher
https://www.npmjs.com/package/expo-intent-launcher
According to the document as well says to configure for iOS platform "this package does not make sense on iOS as there is no equivalent API, so it is not supported".
Furthermore in the iOS platform you can go with Linking API from react-native libraries.
As an example for opening Bluetooth screen the code looks like,
import {Linking } from 'react-native'
Linking.openURL('App-Prefs:Bluetooth')
Either you can use one of these options given below
First:
You can use from "react-native-webview" library (https://github.com/react-native-webview/react-native-webview)
As an example,
<WebView originWhitelist={['*']} source={{uri: uri}} url can be a web link or path to your file local ('file:///...')
Second:
You can go with the react-native-pdf library.
https://www.npmjs.com/package/react-native-pdf
For example,
import Pdf from 'react-native-pdf';
<Pdf
source={source}
onLoadComplete={(numberOfPages,filePath) => {
console.log(`Number of pages: ${numberOfPages}`);
}}
onPageChanged={(page,numberOfPages) => {
console.log(`Current page: ${page}`);
}}
onError={(error) => {
console.log(error);
}}
onPressLink={(uri) => {
console.log(`Link pressed: ${uri}`);
}}
style={styles.pdf}/>
I am trying to use AWS X-Ray in my SailsJS application. I noticed missing subsegments - I added custom traces via AWSXRay.captureAsyncFunc but noticed they are missing. After some closer inspection, I think they actually ended up in a different trace. Lets say I call login API then another API later. I notice my login API trace is weird
Notice theres calls quite abit after the request should have ended.
Those requests should actually be in another segment:
I'd think they should appear after find device subsegment. Why are segments scrambled like that?
My setup: in http.js,
const AWSXRay = require('aws-xray-sdk');
const xrayEnabled = process.env.AWS_XRAY === 'yes'
module.exports.http = {
middleware: {
order: [
'startRequestTimer',
'cookieParser',
'session',
'myRequestLogger',
'bodyParser',
'handleBodyParserError',
'compress',
'methodOverride',
'poweredBy',
'awsXrayStart',
'router',
'awsXrayEnd',
'www',
'favicon',
'404',
'500',
],
awsXrayStart: xrayEnabled ? AWSXRay.express.openSegment(`cast-${process.env.NODE_ENV || 'noenv'}`) : (req, res, next) => next(),
awsXrayEnd: xrayEnabled ? AWSXRay.express.closeSegment() : (req, res, next) => next(),
Then I wrapped my promises like:
instrumentPromise(promise, name, metadata = {}) {
if (this.isXrayEnabled()) {
return new Promise((resolve, reject) => {
AWSXRay.captureAsyncFunc(name, (subsegment) => {
if (!subsegment) console.warn(`[XRAY] Failed to instrument ${name}`)
Object.keys(metadata).forEach(k => {
if (subsegment) subsegment.addMetadata(k, metadata[k])
})
console.time(`[XRAY TIME] ${name}`)
promise
.then((data) => {
if (subsegment) subsegment.close()
console.timeEnd(`[XRAY TIME] ${name}`)
resolve(data)
})
.catch(err => {
if (subsegment) subsegment.close()
console.timeEnd(`[XRAY TIME] ${name}`)
reject(err)
})
})
})
}
return promise
}
Is there any information I am missing here? What am I doing wrong?
I tried manual mode and its alot more reliable but I have to manually pass segment around. Whats wrong with automatic mode? I am kind of guessing it does not work well with async nature nodejs? Like the SDK is not able to differenciate between the various async requests? And may close or track segments in the wrong places? That said ... its supposed to work with express, why isit not working as expected ...
Another thing is how will a shared mysql connection pool be tracked correctly by X-Ray? Different segments will be using the same mysql pool. I assume this will not work work well at all?
The issue you encounter seems to be related to how CLS handle context binding with Promise. There is a opt-in promise patch introduced in this PR https://github.com/aws/aws-xray-sdk-node/pull/11. It has full discussion around the repros and fixes. That should resolve the issue with subsegments being attached to the wrong trace.
The SDK does support capturing pool.query. You can see examples here https://www.npmjs.com/package/aws-xray-sdk-mysql.
I am using the BsModalRef for showing modals and sending data using the content property. So we have some like this :
this.followerService.getFollowers(this.bsModalRef.content.channelId).subscribe((followers) => {
this.followerList = followers;
this.followerList.forEach((follower) => {
follower.avatarLink = this.setUserImage(follower.userId);
this.followerEmails.push(follower.email);
});
});
We are setting the channelId in content of bsModalRef (this.bsModalRef.content.channelId). It is working fine. Now i am writing a unit test for this. Problem is i am not able to mock it. I have tried overriding, spy etc but nothing seems to work. I am using the approach mentioned in this link. One alternative is to use TestBed but i am not much aware of its use. Can anyone please help me finding any approach by which this can be achieved ?
I recently had to do something similar and Mocking the method call worked. The tricky part is injecting the BsModalService in both the test suite and the component.
describe('MyFollowerService', () => {
configureTestSuite(() => {
TestBed.configureTestingModule({
imports: [...],
declarations: [...],
providers: [...]
}).compileComponents();
});
// inject the service
beforeEach(() => {
bsModalService = getTestBed().get(BsModalService);
}
it('test', () => {
// Mock the method call
bsModalService.show = (): BsModalRef => {
return {hide: null, content: {channelId: 123}, setClass: null};
};
// Do the test that calls the modal
});
});
As long as you're calling bsModal as follows this approach will work
let bsModalRef = this.modalService.show(MyChannelModalComponent));
Finally, here are some links that have more indepth coverage about setting up the tests with TestBed.
https://chariotsolutions.com/blog/post/testing-angular-2-0-x-services-http-jasmine-karma/
http://angulartestingquickstart.com/
https://angular.io/guide/testing
I’ve just upgraded from React 15 to 16 and and trying to resolve several issues with my test setup.. In my Enzyme/Expect setup. The biggest one is:
TypeError: (0 , _expect2.default)(...).toInclude is not a function
My test looks like this:
it('renders package with license selected', () => {
const renderedComponent = mount(
<Packages breakpoints={ { gtLarge: true } } packages={ data } />
);
renderedComponent.find('div').first().text()).toInclude('First Name');
});
This…
renderedComponent.find('div').first().text()
renders this…
First Name
Last Name
Has toInclude() changed with my upgrade to "jest": "22.1.4",? I can’t seem to find the documentation.
With Jest, you may now use instead toMatchObject(...)
Why not the following:
expect(renderedComponent.find('div').first()).to.contain.text('First Name');
I use a http-stubs during an development of application prototype with ember-cli.
What I want is to to reuse that stubs in the test environment, but can't figure out how because of looks like ember-cli use a fixture adapter for the test environment.
There was a PR to allow the use of the HTTP Mocks during testing, which sounds like what you are describing, but it was determined that this is not a good way to test your application.
From the issue discussing including the mocks, this comment stated:
...We can to an agreement that mocks are useful for development but are an anti-pattern in testing. We decided that instead of spending time making mocks working in ember test --server we are going to show how to do proper mocking in testing using Pretender.
Stefan showed me an example of mocking with Pretender and the test code is much more readable than having mock server with responses hidden away in the ./server configuration. I'm going to spend some time this weekend looking at what can be scavenged from related PR...
An example from stefanpenner on how to set up pretender for testing was included in the original issue and can be found here.
An example test from that example looks like this:
test('searching', () => {
server.get('/jobs', json(200, {
jobs: [
job({ title: 'UI Engineer' }),
job({ location: 'Palo Alto', title: 'UI Engineer' }),
job({ location: 'Palo Alto', title: 'Backend Engineer'}),
]
}));
server.get('/companies', json(200, {
companies: []
}));
return visit('/').then(() => {
equal(numberOfJobs(), 3, 'expected 3 jobs');
fillIn($('#search-field'), 'UI').then(() => {
equal(numberOfJobs(), 2, 'expected 2 jobs');
});
fillIn($('#search-field'), 'ASDFASDF').then(() => {
equal(numberOfJobs(), 0, 'expected 0 jobs');
});
fillIn($('#search-field'), 'Palo alto').then(() => {
equal(numberOfJobs(), 2, 'expected 2 jobs');
});
return fillIn($('#search-field'), '').then(() => {
equal(numberOfJobs(), 3, 'expected 3 jobs');
});
});
});